2011-03-24 10 views
0

jqueryスライドショーを作成しようとしていますが、スライドショーには.click機能があります。基本的に矢印をクリックすると次のスライドまたは前のスライドに移動しますが、誰もクリックしないので、5秒後に自動的にヘルプjQueryスライドショー

// Create event listeners for .controls clicks 
    jQuery('.control') 
    .bind('click', function(){ 
    // Determine new position 
     currentPosition = (jQuery(this).attr('id')=='right_arrow') 
    ? currentPosition+1 : currentPosition-1; 

     // Hide/show controls 
     manageControls(currentPosition); 
     // Move slideInner using margin-left 

     jQuery('#slideInner').animate({ 
     'marginLeft' : slideWidth*(-currentPosition) 
     }); 
    }); 

    var interval = setInterval(function() { 

    // Move slideInner using margin-left 
    jQuery('#slideInner').animate({ 
     'marginLeft' : slideWidth*(-currentPosition) 
     }); 
    },5000); 

    currentPosition = currentPosition + 1; 

    //clear the interval 
    clear(); 

    function clear() { 
    if(position==numberOfSlides-1) { 
     clearInterval(interval);  
    } 
    } 

    // manageControls: Hides and shows controls depending on currentPosition 
    function manageControls(position){ 
    // Hide left arrow if position is first slide 
    if(position==0){ jQuery('#left_arrow').hide() } 
    else{ jQuery('#left_arrow').show() } 
    // Hide right arrow if position is last slide 
    if(position==numberOfSlides-1){ jQuery('#right_arrow').hide() } 
    else{ jQuery('#right_arrow').show() } 
    } 
    }); 
ため

おかげでそれをしない場合、私はif文を使用することができる場合、私はちょうど思っていたので、次のスライドへのクリック移動した場合を見れば、自動的にスライドさせます

答えて

0

あなたはこの種のもののためにタイマーを使います。

例:

var doSlide = function(){ 
    //code here... 
} 
myTimer = setTimeout(doSlide,5000); 
$('#leftarrow').add('#rightarrow').click(function(){ 
    //stop the timer from counting 
    clearTimeout(myTimer); 
    //go to the next or prev slide 
    doSlide(); 
} 

これにより、ユーザは矢印の一つをクリックすると、一度スライドして自動的にスライド停止し、ユーザーが読むことを可能にするだろうにあるもの(または参照してください?)彼が行くスライド。

ところでjQueryで要素を選択するには、私の例のように別名$を使うことができます。

関連する問題