Javascript jQuery滑块在悬停时停止

我目前正在处理一个小的jQuery元素，但是clearInterval有一些问题

我用我正在研究的一个示例制作了一个JSFIDLE：

正如你所看到的，它旋转的很好，但是当我将鼠标悬停在导航按钮上时，旋转并没有停止。旋转的顺序也有问题。旋转到div1、div2、div3、div4，然后重复。但当我在第一个div上旋转时，在第三个按钮上悬停，它会在第三个div的顶部加载第二个div

有人给我一个好的建议吗？

试试这个（请参阅）：

---

感谢您的快速回复和添加到我的代码中，但是代码仍然有一个小问题。如果滑块位于蓝色div上，而您将鼠标悬停在黄色列表项上，旋转将停止，div将变为黄色，这很好。但是，当您从黄色列表项中删除鼠标时，黄色div将保持显示，这将导致显示两个div。此外，轮换也没有考虑到这一点。下一个div应该是绿色的（因为您将鼠标悬停在黄色上方），但它只是继续自己的旋转。你对如何解决这个问题有什么想法吗？所以都在变量中？那时候我真的很喜欢。太好了，谢谢你的帮助！

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);
        });
    }());
});​