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/

我只想为停止 onClick

添加功能

..然后RESUME，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/

简单的jQuery幻灯片放映/暂停onClick（图片）

1 个答案: