如何遍历一堆句子答案

【问题标题】：How to loop through a bunch of sentences如何遍历一堆句子
【发布时间】：2011-01-29 01:11:21
【问题描述】：

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

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

【问题讨论】：

标签： php jquery css

【解决方案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);

【讨论】：

@patrick dw +1 非常感谢。听起来不是很密集，但是如果我的标记看起来像这样jsfiddle.net/SmJMP，我在每个语句 div 中有 2 个 div。
@zmol：如果您可以将这些对包装在一个 div 中，那将会简单得多。有这种可能吗？
@zmol: Here's how it could work 如果他们成对出现。有一点复杂，因为我们需要防止回调函数运行两次，因此每次将fadeIn() 和rotate() 调用的次数加倍。如果您可以包装对，那么只需更改选择器即可。
@patrick dw 我可以将每个语句包装在一个 div 中，这样更有意义。你介意最后看看这个jsfiddle.net/XsWEe
@zmol：是的，和我上面的解决方案一样，只是改变选择器。 jsfiddle.net/XsWEe/1（另外，你需要在jsFiddle中选择左侧的jQuery库）。

【解决方案2】：

您可以使用一个 jQuery 插件来完成您想要的工作。它被称为 jShowOff (http://ekallevig.com/jshowoff/)。那里有很多示例可以帮助您入门。

【讨论】：