Execute automatically in a loop a function

Question

I have this slider where the gotoslide function changes the slide when the navigation links are pressed. http://jsfiddle.net/AHYVr/

What is the way to make a loop where the gotoslide function autoruns from 0 to lastone and then goes back to start?

var num_slides;
var slides;
var current;
var sa_auto = true;

jQuery(document).ready(function() {
  init_slide()
});

function init_slide(){
  slides = jQuery('.slides_container div');
        num_slides = (slides).length;
        pagination = '<ul class="pagination">';
        var i=1;
        jQuery.each(slides, function() {
    pagination += '<li><a href="javascript:gotoslide('+i+')">'+i+'</a></li>';
                i++;
  });
  pagination += '</ul>';
  jQuery(pagination).insertBefore('#slides');


}

function gotoslide(n){
  sa_auto = false;
        showslide(n);
}

function showslide(n){
     current = n;
        var leftpos = (1-n)*700;
        pagination = jQuery('.pagination li')
     pagination.removeClass('current');
        jQuery(pagination[n-1]).addClass("current");
     slides.removeClass('current');
        jQuery(slides[n-1]).addClass("current");
  jQuery('.slides_container').animate({
    left: leftpos
  }, 2000);
}

I've tried to make a function that increases the gotoslide parameter by 1 and then use it with a setInterval, but it fails. This is the code:

 var t;
        function time (){
         if ( j < num_slides ) {
               show_slide(j++);
         }
        };

        t= setInterval(time, 2000);
        clearInterval(t);

define "it fail's". Is there an error? does it do nothing? does it do something, just the wrong something? — Matt
– Matt, Commented Nov 14, 2012 at 17:08

Matt · Accepted Answer · 2012-11-14 17:40:11Z

1

I'm still not sure I 100% understand your question, but I will say that your setInterval will do nothing, because the moment you create it, you cancel it. Calling clearInterval(t) is used when you want an interval to stop, and not fire again. So, by calling clearInterval the very next line after you create it, it will never fire.

If you want to switch slides once every 2 seconds, and start back over again once you reach the end, try something like this:

var currentSlide = 0;
var nextSlide = function(){
    currentSlide++
    if(currentSlide >= num_slides){
        currentSlide = 0;
    }

    show_slide(currentSlide);
}

var interval = setInterval(nextSlide, 2000);

edited Nov 14, 2012 at 17:40

answered Nov 14, 2012 at 17:31

Matt

41.9k30 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ricardo Castañeda Over a year ago

Great anwswer, It solves the question. But to get it working in my current script I had to set currentSlide to 1 and change the if(currentSlide >= num_slides +1)

TalesTk · Accepted Answer · 2012-11-14 17:09:23Z

1

Have you tried:

function init_slide(){
    slides = jQuery('.slides_container div');
    num_slides = (slides).length;
    pagination = '<ul class="pagination">';
    var i=1;
    jQuery.each(slides, function() {
    pagination += '<li><a href="javascript:gotoslide('+i+')">'+i+'</a></li>'; 
            i++;
});
pagination += '</ul>';
jQuery(pagination).insertBefore('#slides');
for ( var n=0;n <num_slides; n++ ){
    gotoslide(n)
}
}

answered Nov 14, 2012 at 17:09

TalesTk

1813 bronze badges

Comments

TalesTk · Accepted Answer · 2012-11-14 17:52:23Z

0

There we go:

for ( var n=1;n <= i; ++n ){
    if(n == i) { gotoslide(1);}
    else {
     gotoslide(n);
    }
}

I dont know why you are using var i = 1; imho it is kinda confusing.

answered Nov 14, 2012 at 17:52

TalesTk

1813 bronze badges

Comments

Bruno · Accepted Answer · 2012-11-14 18:29:31Z

I added functionality to start and stop the slideshow at whatever slide you want.

function initSlideshow( slides, duration, fadeDuration ) {

    var slide = 0;

    function nextSlide( ) {

        if( slide >= slides.length ) slide = 0;

        slides.hide();
        $(slides[slide]).fadeIn( fadeDuration );

        slide++;
        setTimeout( nextSlide, duration );
    }

    function stopSlideshow( num ) {

        slide = ( num >= 0 && num < slides.length ) ? num : 0;
        window.clearTimeout( timer );
        slides.hide();
        $(slides[slide]).fadeIn( fadeDuration );
    }

    function startSlideshow( num ) {

        if( timer ) window.clearTimeout( timer );

        slide = ( num >= 0 && num < slides.length ) ? num : 0;
        timer = setTimeout( nextSlide, 1 );

    }

    var timer = setTimeout( nextSlide, 1 );

    return {
            stop: stopSlideshow,
            start: startSlideshow
    };
}

// example usage
var controller = initSlideshow( $(".slides"), 3000 );
controller.stop( 3 );
controller.start( 1 );

Fiddle here

Collectives™ on Stack Overflow

Execute automatically in a loop a function

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related