对页面上的多个内部淡入淡出幻灯片进行计时

Question

我以前问过这个问题，但并没有真正得到任何东西。

我需要在页面上显示三个图像，每个图像循环遍历一组，但按顺序计时。这意味着当页面加载三个图像显示时，2秒后第一个更改，再过2秒第二个，然后是第三个，然后它会无休止地重复。

我使用了 innerfade.js这里有一个简单的设置，但这没有时间偏移。

<div id="header-img-1">
<img src="http://medienfreunde.com/lab/innerfade/images/ggbg.gif" width="318" height="110" />
<img src="http://medienfreunde.com/lab/innerfade/images/whizzkids.gif" width="318" height="110" />
</div>
<div id="header-img-2">
<img src="http://medienfreunde.com/lab/innerfade/images/km.jpg" width="318" height="110" />
<img src="http://medienfreunde.com/lab/innerfade/images/tuev.jpg" width="318" height="110" />
</div>
<div id="header-img-3">
<img src="http://medienfreunde.com/lab/innerfade/images/rt_arch.jpg" width="318" height="110" />
<img src="http://medienfreunde.com/lab/innerfade/images/whizzkids.gif" width="318" height="110" />
</div>

.

$(document).ready(
function() {
$('#header-img-1').innerfade2({
    animationtype: 'fade',
    speed: 750,
    timeout: 6000,
    type: 'sequence',
    containerheight: '1em'
});
$('#header-img-2').innerfade2({
    animationtype: 'fade',
    speed: 750,
    timeout: 6000,
    type: 'sequence',
    containerheight: '1em'
});
$('#header-img-3').innerfade2({
    animationtype: 'fade',
    speed: 750,
    timeout: 6000,
    type: 'random_start',
    containerheight: '1em'
});
});​

http://jsfiddle.net/spirelli/gFveN/

因此，#header-img-1 需要在页面加载后淡化 2 秒，#header-img-2 adter 需要淡出 4 秒，#header-img-3 需要在 6 秒后淡出，所有这些都每 6 秒淡化一次。

我

不是很懂Javascript，所以我希望有一个善良的灵魂来帮助我使用正确的代码。谢谢！

Answer 1

API 描述允许添加参数startDelay：

startDelay: Time before the first slide change (Default: '0')

所以

$('#header-img-1').innerfade2({
    animationtype: 'fade',
    speed: 750,
    timeout: 6000,
    startDelay:2000,   // declare your initial delays here
    type: 'sequence',
    containerheight: '1em'
});

会做这个伎俩。

编辑：您的初始版本太旧，请使用我在上面链接中提供的版本。查看它在修改后的示例中工作。请注意函数的不同命名 - innerfade2 vs innerFade 。