使用CSS3的带动画的JavaScript中的横幅旋转

Question

I have to write a simple HTML banner rotator in JavaScript with animated transition using CSS3. 我必须用JavaScript编写一个简单的HTML横幅旋转器，并使用CSS3进行动画过渡。 I came with this: 我来了：

HTML: HTML：

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/banner.css" type="text/css" /> <script type="text/javascript" src="scripts/banner.js"></script> </head> <body> <div><img src="img/banner1.jpg" alt="" id="banner" /></div> <script>window.onload = rotateAnimation('banner', 5000);</script> </body> </html>

CSS: CSS：

 #banner { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } @keyframes myfirst { 0% {opacity: 0;} 10% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} }

JavaScript: JavaScript：

 var i = 0; var banners = new Array("img/banner1.jpg", "img/banner2.jpg", "img/banner3.jpg"); function rotateAnimation(el, speed) { var elem = document.getElementById(el); elem.src = banners[i]; setTimeout('rotateAnimation(\\''+el+'\\','+speed+')',speed); i++; if(i === banners.length) i = 0; }

But as I expected, the animation desynchronise itself and I don't know how to make this on one timer only. 但是正如我所期望的，动画本身会不同步，我不知道如何仅在一个计时器上进行同步。

Answer 1

It didn't need an CSS3 animation. 它不需要CSS3动画。 All it needed was JS script that change images and CSS3 trasition property. 它所需要的只是更改图像和CSS3过渡属性的JS脚本。 Didn't know that transitions work if JS is changing something. 如果JS更改了某些内容，则不知道过渡有效。

使用CSS3的带动画的JavaScript中的横幅旋转

问题描述

1 个解决方案

解决方案1
-1 2015-08-03 23:57:30

使用CSS3的带动画的JavaScript中的横幅旋转

问题描述

1 个解决方案

解决方案1 -1 2015-08-03 23:57:30

解决方案1
-1 2015-08-03 23:57:30