Question

我有这个jquery代码，可以通过淡出当前图像并在下一个图像淡入淡出来在图像之间移动。但当它到达最后一个。它最多回到第一个并再次淡化它。

var size = $("#place-gallery1 li").size();
//   alert(size);
$("ul#place-gallery1 li").click(function(){
    $(this).fadeOut(500,function(){
        var nextId= parseInt($(this).attr("id"))+1;
        if (nextId>size) nextId=1;
        alert(nextId);
        $("ul#place-gallery1 li#"+nextId).fadeIn(600);
    });             
});

html：

<ul class="place-gallery" id="place-gallery1">
    <li id="1" class="show-img"><img src="images/img1.jpg" width="237px" height="237px"/></li>
    "<li id="2" class="hide-img"><img src="images/img2.jpg" width="237px" height="237px" /></li>
    "<li id="3" class="hide-img"><img src="images/img3.jpg" width="237px" height="237px" /></li>
    "<li id="4" class="hide-img"><img src="images/img4.jpg" width="237px" height="237px" /></li>
</ul>

但是当它到达最后的li时，它并没有像代码那样回到第一个

Answer 1

这是每5秒钟旋转一次的照片示例：

function changeImages() {
  var active_event = $("#place-gallery1 li:visible");
  var next_event = active_event.next();
  if(next_event.size() == 0) next_event = $("#place-gallery1 li:first");
  active_event.fadeOut(500);
  next_event.fadeIn(500);
}

setInterval("changeImages()", 5000);

如果要更改onClick上的图像，只需删除setInterval并直接调用changeImages（）函数。

Answer 2

$("#place-gallery1 li").on('click', function(){
    $(this).fadeOut(500, function(){
        var next = $(this).next('li');
        if (!next.length) { next = $("#place-gallery1 li:first"); }
        next.fadeIn(600);
    });             
});

FIDDLE

如何在淡出后显示div？

2 个答案: