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

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

4

4 回答 4

0

没有 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/

于 2013-10-07T11:23:02.387 回答
0

将您的 setInterval 分配给一个变量，这样就只有一个可以重用的间隔对象。

var interval_id = setInterval(...

在悬停事件中，使用 clearInterval(interval_id) 停止它，并在鼠标离开/离开时恢复它。

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

于 2013-10-07T11:18:28.580 回答
0

尝试这个：

基本思想是清除setInterval应该停止滑块的悬停，然后在鼠标悬停时重新启动它。

$(document).ready(function() {

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

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

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

         }
     );

   });
于 2013-10-07T11:18:50.360 回答
0 
sliderTick = setInterval(function(){ tick () }, 2000);

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

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

基本上在鼠标悬停时停止调用该函数并在鼠标移出时恢复

于 2013-10-07T11:19:08.850 回答