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

setInterval を変数に割り当てて、再利用できる間隔オブジェクトを 1 つだけにします。

var interval_id = setInterval(...

ホバー イベントでは、clearInterval(interval_id) を使用して停止し、マウスを離す/離すと元に戻します。

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

于 2013-10-07T11:18:28.580 に答える
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 に答える