Question

I am making a slideshow that continuously loops through 5 images etc. I have it looping fine but the loop won’t start and stop. I was using a pause = true/false variable and adding if statements throughout the code – not very good looking or efficient (took it out of an example). It would spoil the animations and images would go missing if the loop paused after the statements etc.

Are there any standard methods for controlling loops like this?

function setupSlideShow(){
    // Setup SlideShow stuff here then start the loop
    slideBoxTransition()
}

var page = 1;
function slideBoxTransition(){
    switch (settings['transition']['effect']){
        case "slide" :
            next.css({left:settings['width']+"px",top:0,display:"block"});
            current.animate({left: "-="+width+"px"}, {duration : speed, easing : easing, queue : false});
            next.animate({left: "-="+width+"px"}, {duration : speed, easing : easing, queue : false, complete : function(){
                current.css("display","none")
                slideBoxGetImage();
            }});
            break;
    }
}

function slideBoxGetImage(){
    current = $self.eq($self.index(next))
    page += 1;
    if(page < $self.length){
        next = $self.eq( $self.index(current) + 1 );
    }else{
        page = 0;
        next = $self.first();
    }
    slideBoxTimeout();
}

function slideBoxTimeout(){
    setTimeout(function(){
        slideBoxTransition();
    }, delay);
}

Anything would be much appreciated!

Thanks.

Answer 1

var interval;
function slideBoxTimeout(){
    var interval = setInterval(function(){
        slideBoxTransition();
    }, delay);
}

$(".play").click(function() {
    slideBoxTimeout();
});
$(".pause").click(function() {
    clearInterval(interval);
});

taken from : jQuery play/pause jQuery function