jquery - jquery 循环浏览图片

Question

我有一个页面，我使用以下代码循环浏览页面上的图像：

$('#summaryContainer img:gt(0)').hide();
    setInterval(function(){
        $('#summaryContainer :first-child').fadeOut(summary.speed)
            .next('img').fadeIn(summary.speed)
            .end().appendTo('#summaryContainer');}, 
      summary.pause);

工作正常...直到您离开页面并返回。然后在循环开始之前它会闪烁最后一个图像，然后转到第一个。知道是什么原因造成的吗？

Answer 1

尝试设置 css 显示属性：

#summaryContainer img {
    display: none;
}

然后，而不是您的第一行（我们在 css 中处理），淡入您的第一张图片：

$('#summaryContainer img:gt(0)').fadeIn();

这应该使所有图像隐藏，然后平滑地淡入第一张图像。

所以，我想整个事情会是这样的：

 $('#summaryContainer img:gt(0)').fadeIn();
 setInterval(function(){
    $('#summaryContainer :first-child')
         .fadeOut(summary.speed)
         .next('img').fadeIn(summary.speed)
         .end().appendTo('#summaryContainer');}, 
 summary.pause);

加上那个css规则。类似的东西。

Answer 2

jsBin 演示

使用.stop()and是.fadeTo()关键img:first

$('#summaryContainer img:gt(0)').hide();
setInterval(function(){
    $('#summaryContainer img:first').stop().fadeTo(summary.speed, 0)
        .next('img').fadeTo(summary.speed, 1)
        .end().appendTo('#summaryContainer');
},summary.pause);