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秒消失一次。

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

Answer 1

The 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'
});

会做到这一点。

编辑：您的初始版本太旧了，请使用上面链接中提供的版本。看到它在your modified example中工作。请注意函数的不同命名 - innerfade2 vs innerFade。

在页面上定时多个内部淡入淡出幻灯片

1 个答案: