jQuery幻灯片

Question

我想做一个jQuery幻灯片，幻灯片放映具有.click功能，所以基本上如果我点击箭头它会带我到下一张幻灯片或以前，但我需要做到这一点自动滑行，如果没有人点击，所以我只是想知道如果我可以用一个if语句这样看，如果它的点击移动到下一张幻灯片，如果没有在5秒钟内自动完成它，

感谢您的帮助

// 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() } 
    } 
    }); 

Answer 1

你使用定时器来处理这种事情。

实施例：

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元素，你可以使用别名$，就像在我的例子中看到的那样。