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

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 に答える
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 に答える