javascript - 简单的 jQuery 幻灯片/暂停 onClick（图像）

Question

$("#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.

Answer 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/