javascript - アクションで単純なスライダーを一時停止する | setInterval

Question

次のスライドショーで一時停止を追加してホバーで再開するのを手伝ってくれませんか?

setInterval(function() { 
  $('#slideshow >img:first')
  .hide()
  .next()
  .show()
  .end()
  .appendTo('#slideshow');
},  2000);

それが役立つ場合は、機能する codepen リンクもあります。同じ setInterval 関数を使用して画像 ID を変更している別の画像が表示されます。理想的には、この一時停止関数は両方の setInterval ループを停止します。しかし、この例で助けを得ることができれば、残りを改良できるかもしれません。

http://codepen.io/banunn/pen/EKfuj

ありがとう！

Answer 1

ホバー時に clearInterval を呼び出せるように、setInterval によって返された ID を変数に格納します。例えば、

function startInterval(){
   return setInterval(function() { 
      $('#slideshow >img:first')
      .hide()
      .next()
      .show()
      .end()
      .appendTo('#slideshow');
      },  2000);
    }
    var int= startInterval();

    $('#slideshow').hover(function(){
        clearInterval(int);
    },function(){
        int = startInterval();
    });