我正在尝试编写一个 java 脚本来抵消 CSS 动画的开始和循环延迟。偏移量应基于包含 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>
提前致谢。