0

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

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

例如，如果当前选择了 #3 缩略图，我希望所有剩余的 5 个缩略图恢复到它们的原始不透明度设置 0.3

我已将我的一些代码放入下面的链接中，以便您了解我在做什么。

div 类="缩略图">

<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 的函数中，首先将所有缩略图的不透明度设置为 0.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

Here's a nice solution using the .current class

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 回答
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 回答