悬停时暂停幻灯片放映 [英] Pause slide show on hover
本文介绍了悬停时暂停幻灯片放映的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下脚本来运行幻灯片,这很好用。
I have the following script to run a slideshow, that works just fine.
jQuery(document).ready(function ($) {
setInterval(function () {
moveRight();
}, 5000);
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
}, 500, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 500, 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();
});
});
但是我希望它暂停鼠标悬停,我尝试了一些我发现的其他建议在这里SO(包括下面的那个),但无法使它们中的任何一个与我的代码一起工作。
有什么想法吗?谢谢。
But I want it to pause on mouse hover, and I've tried a few other suggestions I found here on SO (including the one below), but couldn't make any of them work with the code I have. Any ideas? Thanks.
$("#slider ul").mouseover(function() {
$("#slider ul").trigger('pause', true);
});
推荐答案
您可以使用 .stop ()
, clearInterval()
// define reference to `setInterval()` call
var interval = setInterval(function () {
moveRight();
}, 5000);
// stop animations, clear `interval`
$("#slider ul").mouseover(function() {
$(this).stop();
clearInterval(interval);
});
这篇关于悬停时暂停幻灯片放映的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文