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属性时？

简单的jQuery幻灯片放映/停止帧

3 个答案: