點擊jQuery滑塊

Question

我想讓這個滑塊在你點擊滑塊時可以工作。我怎樣才能做到這一點？這是代碼：http://jsfiddle.net/EjZzs/15/

$(function() { 

//settings for slider 
var width = 720; 
var animationSpeed = 1000; 
var pause = 3000; 
var currentSlide = 1; 

//cache DOM elements 
var $slider = $('#slider'); 
var $slideContainer = $('.slides', $slider); 
var $slides = $('.slide', $slider); 

var interval; 

function startSlider() { 
    interval = setInterval(function() { 
     $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() { 
      if (++currentSlide === $slides.length) { 
       currentSlide = 1; 
       $slideContainer.css('margin-left', 0); 
      } 
     }); 
    }, pause); 
} 
function pauseSlider() { 
    clearInterval(interval); 
} 

$slideContainer 
    .on('mouseenter', pauseSlider) 
    .on('mouseleave', startSlider); 

startSlider(); 

}); 

Answer 1

此舉確實滑動到其自身功能的代碼，並調用從的setInterval和點擊：

function startSlider() { 
    interval = setInterval(slide, pause); 
    } 

    function slide() { 
    $slideContainer.animate({ 
     'margin-left': '-=' + width 
    }, animationSpeed, function() { 
     if (++currentSlide === $slides.length) { 
     currentSlide = 1; 
     $slideContainer.css('margin-left', 0); 
     } 
    }); 
    } 

    $slideContainer 
    .on('mouseenter', pauseSlider) 
    .on('mouseleave', startSlider) 
    .on('click', slide); 

http://jsfiddle.net/uctr94ve/