[英]jQuery slider stop on hover
I'm currently working on a small jQuery element but having some trouble with clearInterval. 我目前正在研究一个小的jQuery元素,但是在使用clearInterval时遇到了一些麻烦。
I made a jsFiddle with an example what I'm working on: http://jsfiddle.net/eWTSu/ 我用一个例子做了一个jsFiddle我正在做的事情: http : //jsfiddle.net/eWTSu/
As you can see it rotates fine but when I hover over a navigation button the rotation does not stop. 正如你所看到它旋转正常但当我将鼠标悬停在导航按钮上时,旋转不会停止。 Also there's a problem with the order of the rotation.
还有旋转顺序的问题。 The rotation goes div1, div2, div3, div4 and repeat.
旋转为div1,div2,div3,div4和repeat。 But when I hover of the third button while the rotation is on the first div it loads the second div on top of the third.
但是当我在第一个div上旋转时我将第三个按钮悬停,它会在第三个div上方加载第二个div。
Does anyone have a good tip for me? 有没有人对我有好的建议?
Try this (See DEMO ): 试试这个(参见DEMO ):
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);
});
}());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.