1

CSS アニメーションの開始とループの遅延を相殺する Java スクリプトを作成しようとしています。オフセットは、含まれている div 内の画像の数に基づいている必要があります。私はJavaScriptの経験があまりないので、助けていただければ幸いです。

JavaScript:

function bannersImgOffset(){

var photoBanners = document.getElementsByClassName("photoBanner");
for(var i=0; i < photoBanners.length; i++){

    var bannerChildren = i.getChildNodes;
    var loopDelay = bannerChildren.length*5;

    for(i=0, i>bannerChildren.length, i++){
        var imageDelay = (i*5); 

        i.style.webkitanimation = "bannerCycle 5s linear infinite " + loopDelay + "s";
        i.style.mozanimation = "bannerCycle 5s linear infinite " + loopDelay + "s";
        i.style.msanimation = "bannerCycle 5s linear infinite " + loopDelay + "s";
        i.style.oanimation = "bannerCycle 5s linear infinite " + loopDelay + "s";
        i.style.animation = "bannerCycle 5s linear infinite " + loopDelay + "s";

        i.style.webkitanimationDelay = imageDelay + "s";
        i.style.mozanimationDelay = imageDelay + "s";
        i.style.msanimationDelay = imageDelay + "s";
        i.style.oanimationDelay = imageDelay + "s";
        i.style.animationDelay = imageDelay + "s";
        }
    }
}

html:

    <div class="photoBanner">
        <img src="Image01.jpg" alt="">
        <img src="Image02.jpg" alt="">
        <img src="Image03.jpg" alt="">
        <img src="Image04.jpg" alt="">
        <img src="Image05.jpg" alt="">
    </div>

前もって感謝します。

4

1 に答える 1

0

同じ変数を使用して、ループの 2 番目のレベルを設定するつもりでしたか? そうでない場合は、第 2 レベルの for ループ内で別の変数を使用してみてください。

于 2013-10-28T21:36:16.137 に答える