在jQuery圖像滑塊中自動播放

Question

我正在爲類製作一個基本的jQuery滑塊。並想在5秒後自動播放下一張幻燈片，但尚未使用定時器之前，它沒有做我認爲應該做的事。它等待適當的時間間隔，然後繼續觸發回調函數。

$(document).ready(function(){ 

    var currentPosition = 0; 
    var slideWidth = 520; 
    var slides = $('.slide'); 
    var numberOfSlides = slides.length; 

    // Remove scrollbar in JS 
    $('#slidesContainer').css('overflow', 'hidden'); 

    // Wrap all .slides with #slideInner div 
    slides 
    .wrapAll('<div id="slideInner"></div>') 
    // Float left to display horizontally, readjust .slides width 
    .css({ 
     'float' : 'left', 
     'width' : slideWidth 
    }); 

    // Set #slideInner width equal to total width of all slides 
    $('#slideInner').css('width', slideWidth * numberOfSlides); 

    // Insert controls in the DOM 
    $('#slideshow') 
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>') 
    .append('<span class="control" id="rightControl">Clicking moves right</span>'); 

    // Hide left arrow control on first load 
    manageControls(currentPosition); 

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

    // Hide/show controls 
    manageControls(currentPosition); 
    // Move slideInner using margin-left 
    $('#slideInner').animate({ 
     'marginLeft' : slideWidth*(-currentPosition) 
    }); 
    }); 

    // manageControls: Hides and Shows controls depending on currentPosition 
    function manageControls(position){ 
    // Hide left arrow if position is first slide 
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } 
    // Hide right arrow if position is last slide 
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } 
    } 
}); 

Answer 1

Call js-function using JQuery timer

這應該幫助。您必須將滑塊邏輯提取到單獨的函數，然後才能應用所提到的解決方案。