Question

我有一个包含一堆语句的div。我现在在<ul>列表中组织这些语句，但这可能会改变。如何以旋转方式（每个可能每4秒）一次显示这些语句。我也正在寻找一个暂停按钮来保持当前的声明，但我想先得到基本的东西。

<div id="statements">
  <ul>
     <li>Statement 1</li>
     <li>Statement 2</li>
     <li>Statement 3</li>
  </ul>
</div>

Answer 1

示例： http://jsfiddle.net/YSPe7/

var statements = $('#statements > ul > li').slice(1).hide().end();

var i = 0;
function rotate() {
    setTimeout(function() {
        statements.eq(i).fadeOut(800, function() {
            i = ++i % statements.length;
            statements.eq( i ).fadeIn(800, rotate);
        });
    }, 4000);
}
rotate();

基本上，我们隐藏了除第一个语句之外的所有语句，然后引用整个语句。

然后我们调用rotate()函数。在函数内部有setTimeout()导致4秒延迟。

当超时中的代码运行时，它会在当前值i的语句上执行fadeOut()^(docs)方法。

fadeOut()的回调会增加i（或将其设置回0）并对该新元素执行fadeIn()^(docs)方法。

.fadeIn()也有一个回调函数，它是相同的rotate()函数，它会在整个过程中启动。

如果您不想使用i污染名称空间，请将其作为参数传递给rotate()，如下所示：

示例： http://jsfiddle.net/YSPe7/1/

var statements = $('#statements > ul > li').slice(1).hide().end();

function rotate(i) {
    setTimeout(function() {
        statements.eq(i).fadeOut(800, function() {
            i = ++i % statements.length;
            statements.eq( i ).fadeIn(800, function() {
                rotate(i);
            });
        });
    }, 4000);
}
rotate(0);

编辑：使用delay()^(docs)方法代替setTimeout可以减少代码。

示例： http://jsfiddle.net/YSPe7/2/

var statements = $('#statements > ul > li').slice(1).hide().end();

function rotate(i) {
    statements.eq(i).delay(4000).fadeOut(800, function() {
        i = ++i % statements.length;
        statements.eq( i ).fadeIn(800, function() {
            rotate(i);
        });
    });
}
rotate(0);

Answer 2

你可以使用一个jQuery插件来完成你想要的。它被称为jShowOff（http://ekallevig.com/jshowoff/）。那里有很多例子可以让你开始。

如何循环一堆句子

2 个答案: