0

下のサムネイルの線の上に大きな画像が表示されたシンプルな画像ギャラリーに取り組んでいます。liをターゲットとするcssルールを使用して、各サムネイルの初期不透明度を0.3に設定しました。javascriptを使用して、現在選択されているサムネイルの不透明度を1に変更したいのですが、残りは0.3に設定したままにします。

現在のサムネイルの不透明度を0.3から1に変更できましたが、方法がわからないのは、前の（または次の）サムネイルの不透明度を0.3に戻すことです。

たとえば、サムネイル＃3が現在選択されている場合、残りの5つのサムネイルすべてを元の不透明度設定0.3に戻す必要があります。

私のコードの一部を以下のリンクに入れて、私が何をしているのかを理解できるようにしました。

div class = "thumbnails">

<ul>
    <li><a href='#' class='thumb' id="thumb_1"></a></li>
    <!-- MORE FOLLOW -->
</ul>


$("#nextBtn").click(function() {
    currentPic++;
    $(".thumbnails ul li:nth-child(" + currentPic + ")").animate({
        "opacity": "1"
    });
});

完全なコードサンプル：http：//jsfiddle.net/nqKJw/

4

3 に答える 3

1

目的のサムネイルの不透明度を1に設定する関数では、最初にすべてのサムネイルを.3の不透明度に設定します。

$("#nextBtn").click(function() {
    $(".thumbnails ul li").animate({
        "opacity": "0.3"
    });
    currentPic++;
    $(".thumbnails ul li:nth-child(" + currentPic + ")").animate({
        "opacity": "1"
    });
});

試してみてください：http：//jsfiddle.net/nqKJw/1/

于 2012-08-09T20:20:59.803 に答える
0

現在のアイテムを変更する前に、現在のアイテムの不透明度の値を変更するだけです。

$("#nextBtn").click(function() {
  $(".thumbnails ul li:nth-child(" + currentPic + ")").animate({
      "opacity": ".3"
  });

  currentPic++;

  $(".thumbnails ul li:nth-child(" + currentPic + ")").animate({
      "opacity": "1"
  });
});

そしてprevBtnについても同様です

更新されたJSFiddle

于 2012-08-09T20:24:15.260 に答える
0

.currentこれがクラス を使用した素晴らしい解決策です

CSS： 

.current{ opacity:1 !important; }

Jquery：

$("#nextBtn").click(function() {
    var nextThumb = $('.thumbnails .current').removeClass('current').next();
    nextThumb = nextThumb.length?nextThumb:$('.thumbnails li:first');
    $(nextThumb).addClass('current');
});

$("#prevBtn").click(function() {
    var nextThumb = $('.thumbnails .current').removeClass('current').prev();
    nextThumb = nextThumb.length?nextThumb:$('.thumbnails li:last');
    $(nextThumb).addClass('current');
});​
于 2012-08-09T20:30:49.327 に答える