Home/ Questions/Q 8500551
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T00:58:35+00:00

I have an endless loop slideshow, the result I’m looking for is: blinking image

  • 0

I have an endless loop slideshow, the result I’m looking for is: blinking image -> few seconds of blank -> next blinking image, …

@marcus-ekwall solution almost works, but the very first slide is shown for a long interval instead of short, then it loops fine. Any idea? Thank you

$(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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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