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);

这是简单新闻滑块的代码。如何在鼠标悬停时暂停新闻滑块并在鼠标移出时播放。？

Answer 1

将setInterval分配给变量，因此只有一个可以重复使用的间隔对象。

var interval_id = setInterval（...

在你的悬停事件中，使用clearInterval（interval_id）来阻止它，并在鼠标离开/退出时恢复它。

http://www.w3schools.com/jsref/met_win_clearinterval.asp

Answer 2

试试这个：

基本想法是清除悬停上的setInterval，它应该停止滑块，然后在mouseout上重新启动它。

$(document).ready(function() {

     var clearTick = setInterval(function(){ tick () }, 2000);         

     $('div').hover(
         function () {
           clearInterval(clearTick);

         }, 
         function () {
           clearTick = setInterval(function(){ tick () }, 2000);

         }
     );

   });

Answer 3

sliderTick = setInterval(function(){ tick () }, 2000);

$('#ticker li').mouseover(function(){
     clearInterval(sliderTick);
}

$('#ticker li').mouseout(function(){
     sliderTick = setInterval(function(){ tick () }, 2000);
}

当鼠标结束时基本停止调用该函数并在鼠标输出时继续调用

Answer 4

不是jQuery标记，但你使用的是jQuery。

您可以使用hover知道何时悬停元素，setInteval和clearInterval来启动/停止滑块。

代码：

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);
  }
);

演示：http://jsfiddle.net/IrvinDominin/gcVN5/

如何在鼠标悬停时暂停新闻滑块并在鼠标移出时播放。

4 个答案: