How to pause the news slider on mouse hover and play on mouse out.?
Question
<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 answers
solution1
0 2013-10-07 11:18:28
Assign your setInterval to a variable, so there's just the one interval object you can reuse.
var interval_id = setInterval(...
On your hover events, use clearInterval(interval_id) to stop it, and reinstate it on mouse leave/out.
solution2
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.
$(document).ready(function() {
var clearTick = setInterval(function(){ tick () }, 2000);
$('div').hover(
function () {
clearInterval(clearTick);
},
function () {
clearTick = setInterval(function(){ tick () }, 2000);
}
);
});
solution3
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
solution4
0 2013-10-07 11:23:02
Not jQuery tagged, but you are using jQuery.
You can use hover to know when you are hovering your element, and setInteval and clearInterval to start/stop your slider.
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);
}
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.