0

我有这个滑块，当按下导航链接时，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);
4

4 回答 4

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)
}
}
于 2012-11-14T17:09:23.197 回答
1

我仍然不确定我 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);
于 2012-11-14T17:31:48.077 回答
0

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

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

在这里提琴

于 2012-11-14T17:27:13.323 回答
0

我们去：

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

我不知道你为什么使用 var i = 1; 恕我直言，这有点令人困惑。

于 2012-11-14T17:52:23.983 回答