0

私は以前にこれについて尋ねましたが、実際にはどこにも行きませんでした。

1ページに3つの画像を表示する必要があります。各画像はセットをループしますが、順番にタイミングが調整されます。これは、ページが3つの画像表示をロードすると、2秒後に最初の画像が変化し、さらに2秒後に2番目の画像、次に3番目の画像が表示され、その後無限に繰り返されることを意味します。

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

トリックを行います。

編集：あなたの最初のバージョンは古すぎました、上のリンクで提供されたバージョンを使用してください。変更した例で機能することを確認してください。関数の名前が異なることに注意してくださいinnerfade2-vs innerFade。

于 2012-11-12T15:35:40.803 に答える