jquery - 简单的 jQuery 幻灯片放映/停在帧上

Question

我怎么能加；或者修改我下面的 jQuery 代码片段，使其也只包含一个停止功能 - 我希望幻灯片在特定帧处停止。

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

Answer 1

clearInterval像这样使用：

$("#slideshow > div:gt(0)").hide();
var i=0; // counter
handle = setInterval(function() { //assign the interval to a variable 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
    i++;
    if (i==3) clearInterval(handle); // stops on the 3rd frame
},  3000);​

Answer 2

类似的东西 - http://jsfiddle.net/ykSRU/7/

var interval = "";
$("#slideshow > div:gt(0)").hide();
start();

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

function stop() {
    clearInterval(interval);
}

Answer 3

我会将 setInterval 分配给一个变量，然后在满足特定条件时在其上使用 clearInterval ，例如在这么多幻灯片之后，或者当 src 属性是你想要的东西时？