1

スライダーを作成しました。正常に自動再生され、ホバーで一時停止し、ぼかしで再開します。偉大な。

しかし、クリックすると、新しい間隔が開始され、2倍の速さで進み、クリアできませんか?

これが私のコードです：

// Reset autoPlay() if a user clicks a nav button
$('#sliderNav a').click(function(e) {
    setTimeout(autoPlay(), delay);
});

// Auto play the slider
var delay = 4000; // 4 seconds
function autoPlay() {
    myInterval = setInterval(function() { 
        currentOffset += itemWidths[clickCount] // Add the current slides width to total offset
        $sliderWrap.animate({right: currentOffset}, 500, function() {
            clickCount++;
            // If this is the last slide when clicking .next, slide to clone then snap back to beginning.
            if ( itemWidths.length == clickCount ) {
                clickCount = 0;
                currentOffset = totalWidth;
                $sliderWrap.css('right',currentOffset); // Where we started originally
            }
        });
    }, delay );
}    
autoPlay();

// Stop autoPlay() on hover
$('#slider, #sliderNav a').hover(function() { 
    clearInterval(myInterval);   
},
// start autoPlay() on blur
function() { 
    autoPlay();
});

実際に動作するデモを実際に見ることができます: http://www.jonheslop.com/canoe/

4

3 に答える 3

1

関数の戻り値の代わりに関数の参照を渡す必要があります

use setTimeout(autoPlay, delay); instead of  setTimeout(autoPlay(), delay);

何度も呼び出された場合に古い setInterval をクリアするように、autoPlay 内で clearInterval を使用する必要があります。

 var myInterval ;
    function autoPlay() {
         clearInterval(myInterval); // clear older setInterval.
        myInterval = setInterval(function() { 
             ..............
于 2012-10-08T19:49:13.337 に答える
0

グローバル変数を使用して、setTimeout の ID を格納します。

var timer = 0;

$('#sliderNav a').click(function(e) {
    timer  = setTimeout(autoPlay(), delay);
});

...

// Stop autoPlay() on hover
$('#slider, #sliderNav a').hover(function() { 
    clearInterval(timer);   
},

....

于 2012-10-08T19:53:30.747 に答える
0

バグがあります

setTimeout(autoPlay(), delay);  <-- you are calling the function right away.

() を削除する必要があります。

setTimeout(autoPlay, delay);
于 2012-10-08T19:57:22.027 に答える