如何在鼠标悬停时暂停新闻滑块并在鼠标移出时播放。
[英]How to pause the news slider on mouse hover and play on mouse out.?
问题描述
<body>
<ul id="ticker">
<li>
<p>Innovation - The Power of 4S The progress of Auto Industry stands on the four basic pillars.</p>
<p>The S pillars and it would not be an overstatement that the combination thr illed the Auto-Indutry.</p>
</li>
<li>
<p>Innovation - The Power of 4S The progress of Auto Industry stands on the four basic pillars.</p>
<p>The S pillars and it would not be an overstatement that the combination thr illed the Auto-Indutry.</p>
</li>
<li>
<p>Innovation - The Power of 4S The progress of Auto Industry stands on the four basic pillars.</p>
<p>The S pillars and it would not be an overstatement that the combination thr illed the Auto-Indutry.</p>
</li>
</ul>
<script>
function tick(){
$('#ticker li:first').slideUp( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ tick () }, 2000);
this is the code for simple news slider. 
这是简单新闻滑块的代码。 How to pause the news slider on mouse hover and play on mouse out.? 如何在鼠标悬停时暂停新闻滑块并在鼠标移出时播放。
4 个解决方案
解决方案1
0 2013-10-07 11:18:28
Assign your setInterval to a variable, so there's just the one interval object you can reuse. 将setInterval分配给一个变量，因此只有一个可以重用的时间间隔对象。
var interval_id = setInterval(... var interval_id = setInterval（...
On your hover events, use clearInterval(interval_id) to stop it, and reinstate it on mouse leave/out. 在悬停事件上，使用clearInterval（interval_id）将其停止，并在鼠标离开/退出时将其恢复。
http://www.w3schools.com/jsref/met_win_clearinterval.asp http://www.w3schools.com/jsref/met_win_clearinterval.asp
解决方案2
0 2013-10-07 11:18:50
Try this: 尝试这个：
The basic idea is to clear the setInterval on hover which should stop slider and then reinitiate it on mouseout. 基本思想是在悬停时清除setInterval ，该setInterval应该会停止滑块，然后在鼠标移出时重新启动它。
$(document).ready(function() {
var clearTick = setInterval(function(){ tick () }, 2000);
$('div').hover(
function () {
clearInterval(clearTick);
},
function () {
clearTick = setInterval(function(){ tick () }, 2000);
}
);
});
解决方案3
0 2013-10-07 11:19:08
sliderTick = setInterval(function(){ tick () }, 2000);
$('#ticker li').mouseover(function(){
clearInterval(sliderTick);
}
$('#ticker li').mouseout(function(){
sliderTick = setInterval(function(){ tick () }, 2000);
}
Basically stop calling the function when the mouse is over and resume on mouse out 基本上在鼠标悬停时停止调用该函数，并在鼠标移出时恢复
解决方案4
0 2013-10-07 11:23:02
Not jQuery tagged, but you are using jQuery. 没有jQuery标签，但是您正在使用jQuery。
You can use hover to know when you are hovering your element, and setInteval and clearInterval to start/stop your slider. 您可以使用hover来知道何时悬停元素，并可以使用setInteval和clearInterval来启动/停止滑块。
Code: 码：
function tick(){
$('#ticker li:first').slideUp( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
var ticker=setInterval(function(){ tick () }, 2000);
$('#ticker').hover(
function() {
clearInterval(ticker);
}, function() {
ticker=setInterval(function(){ tick () }, 2000);
}
);
Demo: http://jsfiddle.net/IrvinDominin/gcVN5/ 演示： http ： //jsfiddle.net/IrvinDominin/gcVN5/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.