Question

我有这个滑块，当按下导航链接时，gotoslide功能会更改幻灯片。 http://jsfiddle.net/AHYVr/

制作循环的方法是什么，其中gotoslide函数从0到lastone自动运行，然后又回到开始状态？

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);
}

我尝试创建一个函数，将gotoslide参数增加1，然后将其与setInterval一起使用，但它失败了。这是代码：

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

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

Answer 1

你试过了吗？

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)
}
}

Answer 2

我仍然不确定我100％理解你的问题，但我会说你的setInterval什么都不做，因为你创建它的那一刻，你取消它。当您希望间隔停止而不是再次触发时，将使用调用clearInterval(t)。因此，通过在创建它之后调用clearInterval下一行，它将永远不会触发。

如果您想每2秒切换一次幻灯片，并在结束后重新开始，请尝试以下操作：

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

    show_slide(currentSlide);
}

var interval = setInterval(nextSlide, 2000);

Answer 3

我添加了在任何幻灯片中开始和停止幻灯片放映的功能。

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 );

小提琴here

Answer 4

我们走了：

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

我不知道你为什么使用var i = 1; imho它有点令人困惑。

在循环函数中自动执行

4 个答案: