javascript - jQuery滑块在悬停时停止

Question

我目前正在研究一个小的 jQuery 元素，但在使用 clearInterval 时遇到了一些问题。

我用我正在做的一个例子做了一个 jsFiddle：http: //jsfiddle.net/eWTSu/

如您所见，它可以很好地旋转，但是当我将鼠标悬停在导航按钮上时，旋转不会停止。旋转的顺序也有问题。旋转 div1、div2、div3、div4 并重复。但是，当我将第三个按钮悬停在第一个 div 上时，它会将第二个 div 加载到第三个 div 之上。

有人对我有什么好的建议吗？

Answer 1

试试这个（见演示）：

jQuery(document).ready(function () {
    $('.greenC, .blueC, .orangeC').hide();

    $('.nav li').hover(function () {
        var liClass = $(this).attr('class');

        $('.slider').hide();
        $('.' + liClass + 'C').show();
    });

    (function () {
        var interval_function = function () {
            jQuery('#header_slider > div:first')
                .hide()
                .next()
                .show()
                .end()
                .appendTo('#header_slider');
        };

        var interval = setInterval(interval_function, 1000);

        $('.nav li').hover(function () {
            clearInterval(interval);
        }, function () {
            interval = setInterval(interval_function, 1000);
        });
    }());
});​