Question

我正在制作一个简单的图片库，下方的缩略图线上方显示了更大的图片。我已经使用针对li的css规则将每个缩略图的初始不透明度设置为0.3。使用javascript我想将当前选中的缩略图的不透明度更改为1，但将其余部分设置为0.3。

我已设法将当前缩略图的不透明度从0.3更改为1，但我无法弄清楚如何将之前（或下一个）缩略图的不透明度更改回0.3。

例如，如果当前选择了缩略图＃3，我希望其余5个缩略图恢复到原始不透明度设置为0.3

我已将部分代码放入以下链接中，以便您了解我的目标。

div class =“thumbnails”＆gt;

<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/

Answer 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/

Answer 2

在更改当前项目之前，只需更改当前项目的不透明度值

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

  currentPic++;

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

类似于prevBtn

Updated JSFiddle

Answer 3

Here使用.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');
});

选择下一个和上一个列表项

3 个答案: