2

I have created an image slideshow using jQuery where 5 images appear one after another during an interval of 25 seconds. Each images stays on for 5 seconds before fading out and then the next image fades in.
The slideshow works fine but I want it to loop forever, i.e. after the last image fades out, it should restart the animation from the first image.
I tried using setInterval but couldn't succeed. Here's the working example of the slideshow which I've coded:

JSfiddle

Here's the complete code:

HTML:

<img id="img1" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img2" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-1.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img3" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-2.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img4" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-3.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img5" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-4.jpg" style="display: block; width: 50%; position: absolute;" />

Javascript:

$(document).ready(function(){
    $("#img2,#img3,#img4,#img5").hide();
    setTimeout(function(){
        $("#img1").fadeOut("slow", function () {});
    }, 5000);
    setTimeout(function(){
        $("#img2").fadeIn("slow", function () {});
    }, 5000);    
    setTimeout(function(){
        $("#img2").fadeOut("slow", function () {});
    }, 10000); 
    setTimeout(function(){
        $("#img3").fadeIn("slow", function () {});
    }, 10000);
    setTimeout(function(){
        $("#img3").fadeOut("slow", function () {});
    }, 15000); 
    setTimeout(function(){
        $("#img4").fadeIn("slow", function () {});
    }, 15000);
    setTimeout(function(){
        $("#img4").fadeOut("slow", function () {});
    }, 20000);
    setTimeout(function(){
        $("#img5").fadeIn("slow", function () {});
    }, 20000);
    setTimeout(function(){
        $("#img5").fadeOut("slow", function () {});
    }, 25000);
});  
3
  • have you tried wrapping it in setInterval()? w3schools.com/jsref/met_win_setinterval.asp
    – ntgCleaner
    Aug 26, 2013 at 22:48
  • 2
    for christ's sake, They still have relevant information. Just because they have a few mistakes doesn't mean they're a leper.
    – ntgCleaner
    Aug 26, 2013 at 22:54
  • 2
    Roko, thats just your opinion (and a misinformed one at that). It is by no means a rule and by no means should you present it as one. Aug 26, 2013 at 22:56

4 Answers 4

7

jQuery(function( $ ){             // DOM ready shorthand
    
    // ::: Fade Gallery: http://stackoverflow.com/a/18454450/383904
    var $gal = $("#gallery"),
        $img = $gal.find(">*"),
        n = $img.length,          // number of images
        c = 0,                    // counter
        itv;                      // loop interval       
   
    function anim(){ $img.fadeOut().eq( ++c % n ).stop().fadeIn(); }
    function loop(){ itv = setInterval(anim, 3000); }
    function stop(){ clearInterval( itv ); }
    
    $img.hide().eq(c).show();     // Begin with `c` indexed image
    $gal.hover( stop, loop );     // Pause gallery on hover
    loop();                       // START!
    
});
#gallery     { position:relative; }
#gallery img { position:absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(Hover to pause gallery)<br>
<div id="gallery">
    <img src="//placehold.it/200x130/993/fff?text=1" />
    <img src="//placehold.it/200x130/379/fff?text=2" />
    <img src="//placehold.it/200x130/973/fff?text=3" />
    <img src="//placehold.it/200x130/739/fff?text=4" />
    <img src="//placehold.it/200x130/793/fff?text=5" />
</div>

2
  • 1
    Thanks a lot for your answer. This is exactly the sort of functionality which I wanted and this was the most simplest answer. Thank you again. Aug 26, 2013 at 23:06
  • @Plymouth223 thanks! P.S: the $(function(){ ..... }); is not that bulletproof against the use of the alias $ from other libraries, but just inside a jQuery - only - environment. Aug 26, 2013 at 23:20
2

Do one loop in a function. Have the function call itself after a setTimeout. It should run forever. You would want some array logic though to loop through the pictures. Something like so:

function go(i) {
  setTimeout(function(){
    $('#img'+i).fadeOut(5000);
    if (i<6) i=1;    
    else i++;
    go(i);
  },5000);
}
go(1);
1
  • 1
    +1 You could also spare additional lines checking for i % images.length (instead the if else) Aug 26, 2013 at 23:27
1

One way of doing this can be solved by standard javascript, and as ntgCleaner has suggested in the comments via the setInterval(function, time) function.

In pseudo code one could express this as such:

function wrapper() {
   allYourCode()
}

setInterval(wrapper, 90000) // running the function wrapper every 1,5 minute.
1

I like runfaj's solution, but for completion, here's a setInterval(..) solution. Use setTimeout to properly synchronise when the setInterval timeout should execute. Example snippet with a jsfiddle:

var singleImageDisplayTime = 5000;
var completeLoopTime = 5 * singleImageDisplayTime;

function fadeInFunction(jquerySelector) {
    $(jquerySelector).fadeIn("slow", function () {});
}
function fadeOutFunction(jquerySelector) {
    $(jquerySelector).fadeOut("slow", function () {});
}
...
setTimeout(function () {
    fadeInFunction("#img1");
    setInterval(function() { fadeInFunction("#img1"); }, completeLoopTime);
}, 5 * singleImageDisplayTime);
setTimeout(function () {
    fadeOutFunction("#img1");
    setInterval(function() { fadeOutFunction("#img1"); }, completeLoopTime);
}, 1 * singleImageDisplayTime);
...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.