1

現在 JavaScript の問題があります。私のウェブサイトには、10 秒間隔で常に画像を回転させる 4 つの部門が隣り合っています。現在の間隔で画像を回転させ続けるにはこれらの間隔が必要ですが、素敵なウォーターフォール効果を得るためには、互いに 5 秒間隔で開始します。JavaScript を使用してこれを達成するにはどうすればよいですか?

私のウェブサイトのヘッダーでどのように見えるかの画像

これは、単一の分割を表示し、画像の回転を処理するために現在使用しているコードの例です。

<div class = "TestRotator">
<img src="http://bushveld.info/wp-content/uploads/2013/07/image1.png" alt="rotating" width="100" height="232" id="rotator">
<script type="text/javascript">
(function () {
    var rotator = document.getElementById('rotator'); // change to match image ID
    var imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/';
    var delayInSeconds = 5;
    // set number of seconds delay
    // list image names
    var images = ['image2.png', 'image3.png', 'image4.png'];
    var num = 0;
    var changeImage = function () {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
})();
</script>
</div>
4

3 に答える 3

1

いっぱいいじったよ！（私はそれを大きく変えました。）

setInterval()および他の多くと変更されsetTimeout()ました。

これはあなたが望んでいたものですか？

PS: stateimgs が変更される最初の画像を保持します。およびタイムアウトの違い（200ミリ秒は、それらの間に何らかの違いを生むためのものです。必要に応じて、ラウンド数に変更できます）。

于 2013-07-23T15:43:27.517 に答える
0

私があなたの質問を正しく理解していれば、次のようなものが必要です。

window.onload = function () {
    var // Customable parameters
        imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/',
        interval = 2, // Interval between "flushes" in seconds. Must be > speed * maxScreens
        speed = 0.1, // "Flush" speed in seconds
        maxScreens = 4, // amount of used image tags
        images = 4, // amount of image sources, can be > maxScreens
        dir = 1, // 1 = from left to right, -1 = from right to left
        // Program
        flush,
        target = (dir > 0) ? 1 : maxScreens,
        targetOrigo = target,
        changeImage = function() {
            var img = document.getElementById('rotator' + target),
                id = parseInt(img.src.substr(img.src.length - 5, 1), 10) - dir;
            if (id < 1) {
                id = images;
            }
            if (id > images) {
                id = 1;
            }
            img.src = imageDir + 'image' + id + '.png';
            if (target !== maxScreens - targetOrigo + 1) {
                target += dir;
                setTimeout(changeImage, speed * 1000);
            }  else {
                target = targetOrigo;
                setTimeout(runRotation, interval * 1000);
            }
            return;
        },
        runRotation = function () {
            setTimeout(changeImage, speed * 1000);
        };  
    setTimeout(runRotation, 1000);
}

jsFiddle でのライブ デモ

関数を に配置したことに注意してくださいwindow.onload。回転が開始する前に、すべての画像が既に読み込まれていると見栄えが良くなります。

スニペットはまったく使用せずsetInterval()、代わりにネストされた s に基づいていsetTimeout()ます。このようにして、ユーザーが他のタブにアクセスしてからサイトに戻った場合に発生する可能性のある混乱を回避できます (使用するブラウザーによって異なります)。

間隔、「フラッシュ」速度、ローテーションにある画像の数、さらには使用したい画像の数 (最大 = 9) で遊ぶことができます。回転方向を切り替えることもできます。

2 つの類似した画像が同時に表示されるのを避けたい場合はimage5.png、画像フォルダーに追加して、 を設定できimages = 5ます。

画像ソース配列を使用したバージョンも利用可能です。

于 2013-07-23T15:49:07.047 に答える