CODEWITHSUNDEEP
jquerytimerslideshow
CUDA
CUDA

Reputation: 165

jQuery timed repeating Slideshow

The code below swaps the first pic to the second pic correctly but doesnt continue to 3 and 4 and start over.

= function () {

    var $active = $('#challengeTwoImageJq .carouselImagejQueryActive');
    var $next = ($('#challengeTwoImageJq .carouselImagejQueryActive').next().length > 0) ? $('#challengeTwoImageJq .carouselImagejQueryActive').next() : $('#challengeTwoImageJq img:first');
    timer = setInterval(function () {

        $active.removeClass('carouselImagejQueryActive');
        $next.fadeIn().addClass('carouselImagejQueryActive');

    }, 3000);


    timer = setInterval('challengeTwoJquery()', 3000);

}

HTML

<div id='challengeTwoImageJq' class='sectionChallengeCarouselImage'>
    <img id='imgq1' imgn='1' class='carouselImage carouselImagejQueryActive' src='img/image1.jpg'/>
    <img id='imgq2' imgn='2' class='carouselImage' src='img/image2.jpg'/>
    <img id='imgq3' imgn='3' class='carouselImage' src='img/image3.jpg'/>
    <img id='imgq4' imgn='4' class='carouselImage' src='img/image4.jpg'/>
</div>

Upvotes: 1

Views: 3129

Answers (1)

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

If you simply want them to display/cycle you could do:

function runem() {
    var allofEm = $('#challengeTwoImageJq img');
    var $active = allofEm.eq(0);
    $active.show();
    var $next = $active.next();
    var timer = setInterval(function() {
        $next.fadeIn();
        $active.hide();
        $active = $next;
        $next = (allofEm.last().index() == allofEm.index($active)) ?
            $next = allofEm.eq(0):$active.next();

    }, 3000);
}
runem();

You might be able to simplify it some though. And you don't need the function unless you really want it.

EDIT: just to be clear, I assume this CSS at the start:

#challengeTwoImageJq img {display:none;}

see it in action here: http://jsfiddle.net/8Mp7T/

Upvotes: 1

Related Questions