0 
$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

フィドル： http： //jsfiddle.net/camny77/WgRtp/embedded/result/

STOPに機能を追加したいだけです onClick

..そして再開、onClick。

4

1 に答える 1

1

clearInterval関数を使用して間隔をクリアし、アニメーションを停止することができます。

アニメーションのステータス（アクティブかどうか）を確認するための変数を維持し、クリックイベントが発生したときにそれを切り替えるだけです。

次のコードは、クリックするとアニメーションを停止し、クリックすると再開します。

var _animate  = '';
var active = 1;
function animate() {
    _animate = setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);
}


$("#slideshow").bind(
    'click' , function() {
        if (active === 1) {
            clearInterval(_animate);
            active = 0;
        } else {
            animate();
            active = 1;

        }
    }
);
$("#slideshow > div:gt(0)").hide();
animate();

私はあなたのフィドルを編集しました：http：//jsfiddle.net/WgRtp/3/

于 2012-12-11T21:01:32.370 に答える