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 demo

使用.stop()和.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);

jquery骑自行车穿过图像

2 个答案:

jsBin demo