I'm essentially trying to make a slideshow where images fade in and fade out after 5 seconds or so. The slideshow a bunch of images stacked on top of each other, not side by side. How would I make img1 fadeOut and img2 fadeIn after 5 seconds, then have img2 fadeout and img3 fadein after another 5 seconds, etc.?

I was thinking of using the setInterval() function, but I don't know how it works. Maybe delay()?

I'm essentially trying to make a slideshow where images fade in and fade out after 5 seconds or so. The slideshow a bunch of images stacked on top of each other, not side by side. How would I make img1 fadeOut and img2 fadeIn after 5 seconds, then have img2 fadeout and img3 fadein after another 5 seconds, etc.?

I was thinking of using the setInterval() function, but I don't know how it works. Maybe delay()?

• javascript
• jquery
• fadein
• fadeout

3 Answers 3

You don't need a plugin. It's quite easy to do it with a few lines of code:

HTML

    <div id="images">
    <ul
        ><li><img src="img/11.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/12.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/13.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/14.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/15.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/5.jpg" width="520" height="203" alt="" /></li
    ></ul>
</div>

CSS

#images ul{position:absolute;right:9px;top:1px;width:520px;height:202px;list-style:none;overflow:hidden}
#images li{display:none;position:absolute;left:0;top:0;}

JS

$(document).ready(
  function() {
    var i = 0, j = 0; 
    var imgs = $('#header ul').children();
    runIt(imgs);

    function runIt() {
      $(imgs).eq(i).fadeIn(3000, function() {
        setTimeout(runIt,'200');
      });
      i = i + 1; 
      if (i == imgs.length) {
        i = 0; $('#images li').fadeOut(1000)
      } 
    }
});

Why not use a plugin that does this? There are tons of them out there, including cycle

I had problems with IE when I tried to use fadein and fadeout for a slice gallery. I was using the jquery library "http://ajax.googleapis./ajax/libs/jquery/1.2.6/jquery.min.js". When I changed to "http://code.jquery./jquery-1.9.1.js" library everything was ok with IE, Chrome and FF and I could skip all modifications.