0

我以前问过这个问题，但没有真正得到任何地方。

我需要在一个页面上显示三个图像，每个图像循环通过一组，但按顺序计时。这意味着当页面加载三个图像显示时，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，所以我希望有一个好心人来帮助我编写正确的代码。谢谢！

4

1 回答 1

1

API-Description允许添加参数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'
});

会成功的。

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

于 2012-11-12T15:35:40.803 回答