自定義JQuery滑塊問題

Question

我仍然試圖掌握Javascript，並且今天遇到了我最近的困惑。我正在嘗試製作一個標準滑塊，以暫停懸停並在鼠標懸停時恢復。我已經嘗試了幾次嘗試，並且每次都嘗試了我的JS炸彈。以下是Jquery。這裏是的jsfiddle http://jsfiddle.net/HFQ28/

jQuery(document).ready(function ($) { 

timer = setInterval(function() { 
    moveRight(); 
}, 1000); 

$('#slider').mouseover(function() { 
    clearInterval(timer); 
}); 

$('#slider').mouseleave(function() { 
    timer; 
}); 

    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    $('#slider').css({ width: slideWidth, height: slideHeight }); 

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    $('#slider ul li:last-child').prependTo('#slider ul'); 

    function moveLeft() { 
     $('#slider ul').animate({ 
      left: + slideWidth 
     }, 200, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    } 

    function moveRight() { 
     $('#slider ul').animate({ 
      left: - slideWidth 
     }, 200, function() { 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    } 

    $('a.control_prev').click(function() { 
     moveLeft(); 
    }); 

    $('a.control_next').click(function() { 
     moveRight(); 
    }); 

}); 

Answer 1

嘗試更新.mouseleave

$('#slider').mouseleave(function() { 
     timer = setInterval(function() { 
     moveRight(); 
    }, 1000); 
    }); 

Answer 2

你也可以嘗試下面

$("#slider") 
.on("mouseenter", function() { 
    clearInterval(timer); 
}) 
.on("mouseleave", function() { 
    timer = setInterval(function() { 
     moveRight(); 
    }, 1000); 
}); 

jsfiddle click here