2011-12-21 6 views
0

ガイドツアーを開始するときにユーザーがクリックできるリンクがあります。それは、スライドショー(その1ページのウェブサイト)のように、setTimeoutsを使用して一連のクリックをシミュレートすることです。jquery一連のシミュレートされたクリックを開始し、必要なときに停止します

ただし、ユーザーが手動ナビゲーションリンクの1つをクリックすると、この自動ガイドツアーを停止します。助言がありますか?

/編集:これは...私は仕事にこれが必要か

である私は#nav_eまでずっと(ように5秒.click()#nav_b直後、その後.click()#nav_aに必要と

とき。ユーザーはすべての上#nav_a

からそれが開始されます再び #startをクリックすると、ユーザークリッカーは #stopそれは自動 .click()プロセス

を停止します

+1

は、 'clearTimeout' /' clearInterval'を使用します。 –

+0

私はsetTimeout/clearTimeoutを優先します。タイムアウトは、別のタイムアウトのコンテキストを渡すことができるので、非常に簡単に別のタイムアウトを生成します。 –

+0

私は新しいsetTimeoutsを生成しているので、「停止」をクリックしたときにどのセットをクリアするかをどのように設定することができますか? – stewart715

答えて

1

私はスライドショーを円形にしましたが、好きなときは最後に止めることができます。基本的なロジックは、スライドをクリックすると、自動再生をキャンセルします。

<div class="slides"> 
    <div class="slide">[ content ]</div> 
    <div class="slide">[ content ]</div> 
    <div class="slide">[ content ]</div> 
</div> 
<script> 
var stopSlideshow = false, 
slideTimeout = null, 
slideTime = 5000, // 5 seconds 
doSlide = function($slide) { 
    $('.slide').not($slide).hide(); // hide all but current slide 
    $slide.show(); // show current slide 
    $slide = ($slide.next().length) ? $slide.next() : $('.slide:first'); 
    if (!stopSlideshow) { // automatically keeps going if slide show not stopped 
     slideTimeout = window.setTimeout(function(){doSlide($slide);}, slideTime); 
    } 
}; 
$('.slide').bind('click',function(ev){ 
    stopSlideshow = true; // set flag 
    window.clearTimeout(slideTimeout); // stop timeout 
    $('.slide').unbind(); // cancel slide click 
}); 
doSlide($('.slide:first')); // start wizard 
</script> 
0

透明なマスクdivを追加します。ユーザーがクリックすると、イベントをキャッチして、setTimeoutを停止できます。

関連する問題