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

あなたの質問を 100% 理解しているかどうかはまだわかりませんが、setInterval を作成した瞬間にキャンセルするため、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 に答える
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 に答える
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 に答える