Question

我仍在努力掌握Javascript，今天我遇到了最新的谜题。我正在尝试制作一个标准滑块，在悬停时暂停并在mouseout上恢复。我每次都试过几次尝试和我的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

自定义JQuery Slider问题

2 个答案: