[英]Pause slide show on hover
我有以下脚本来运行幻灯片,效果很好。
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 上找到的其他一些建议(包括下面的建议),但无法使它们中的任何一个与我拥有的代码一起工作。 有任何想法吗? 谢谢。
$("#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);
});
您可以使用clearInterval()
删除间隔。
希望这可以帮助:
var timerObject=null;
function StartSlide(){
timerObject = setInterval(function () {
moveRight();
}, 5000);
}
function stopSlide(){
clearInterval(timerObject)
}
$("#slider ul").mouseover(function() {
stopSlide()
});
$("#slider ul").mouseleave(function() {
StartSlide()
});
.stop() | jQuery API
JSfiddle示例:
<script type="text/javascript">
$(window).load(function() {
$("#slider").flexisel({
visibleItems: 3,
animationSpeed: 1000,
itemsToScroll: 6,
autoPlay: true,
autoPlaySpeed: 3000,
pauseOnHover: true,
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint: 480,
visibleItems: 1
},
landscape: {
changePoint: 640,
visibleItems: 3
},
tablet: {
changePoint: 768,
visibleItems: 4
}
}
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.