Question

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

@ 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>

Answer 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);
});

我还会敦促您缓存选择器和图像位置以获得性能提升。

Answer 2

jsBin demo

  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();

幻灯片显示闪烁效果

2 个答案:

jsBin demo