1

我有一个无限循环幻灯片，我正在寻找的结果是：闪烁的图像->几秒钟的空白->下一个闪烁的图像，...

@marcus-ekwall 解决方案几乎可以正常工作，但是第一张幻灯片显示的时间间隔很长而不是很短，然后循环正常。任何的想法？谢谢

$(function(){
$('.slideshow img:gt(0)').hide();
setInterval(function(){
    var $current = $('.slideshow :first-child').hide();
    var $next = $current.next('img');
    $current.appendTo('.slideshow');
    setTimeout(function(){ 
        $next.show();
    }, 1900);
}, 2000);
});

HTML：

<style type='text/css'>
    .slideshow { position:relative; }
    .slideshow img { position:absolute; left:0; top:0; }​
</style>

<body>
    <div class="slideshow">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>
</body>
4

2 回答 2

1

然后你需要在你的时间间隔内超时。像这样的东西：

$(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){
        var $current = $('.slideshow :first-child').hide();
        var $next = $current.next('img');
        $current.appendTo('.slideshow');
        setTimeout(function(){ 
            $next.show();
        }, 150);
    }, 300);
});

我还将敦促您缓存选择器和图像位置以提高性能。

于 2012-09-09T18:44:24.250 回答
1

jsBin 演示

  var c=0, n=$('.slideshow img').length;


  var visibleTime  = 2000;
  var hiddenTime   = 200;
  function loop(){
      $('.slideshow img').hide().eq(c++%n).stop().delay(hiddenTime).fadeTo(100,1,function(){
           $(this).delay(visibleTime).fadeTo(100,0,loop);
      });
  }loop();
于 2012-09-09T19:19:34.400 回答