如何在悬停时停止滑块的动画？
如何在悬停时停止滑块的动画？
提问于 2013-06-23 05:44:20
1.当鼠标悬停在图像上/关闭图像时，如何暂停/停止/继续动画？
当鼠标悬停在图像上时，我希望图像在鼠标悬停时暂停。然后，我希望当鼠标超出图像范围时，它可以继续滚动图像。
jQuery(function ($){
// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 4000; //millseconds
var $time_between_slides = 1000; //millseconds
var $stopAnimating = true;
var timeout;
function slides() {
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
$interval = '';
// auto scroll
$interval = setInterval(function (){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}, $transition_time + $time_between_slides);
slides().mouseover(function () {
slides().stop;
setInterval = 0;
alert('mousein');
});
slides().mouseout(function () {
alert('mouseout');
});
});这是一件很容易做的事情。但很明显我是这个领域的新手谢谢
回答 1
Stack Overflow用户
发布于 2014-10-28 05:36:41
你很幸运@user2512393，因为我已经弄清楚了。此link将对您有所帮助。
将间隔包装在函数中，声明interval变量，将函数返回到外部，并将鼠标悬停在新构建的函数上。
jQuery(function ($) {
// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'img'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4300; // 4 seconds
var $interval;
function slides() {
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
function startloop(){
$interval = setInterval(
function () {
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}, $transition_time + $time_between_slides);
}
function pauseLoop() {
window.clearInterval($interval);
}
$(".slider").hover(
function () {
//alert("pause");
pauseLoop(); // pause the loop
},
function () {
//alert("unpause");
startloop(); //scroll()
});
return startloop();
});此代码位于github上。
现在，我正在尝试实现触摸检测，以便在移动设备上暂停它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17255601
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号