JavaScript中的横幅旋转与使用CSS3的动画答案

【问题标题】：Banner rotation in JavaScript with animation using CSS3JavaScript中的横幅旋转与使用CSS3的动画
【发布时间】：2013-12-19 23:31:50
【问题描述】：

我必须用 JavaScript 编写一个简单的 HTML 横幅旋转器，并使用 CSS3 进行动画转换。我带着这个：

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：

#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：

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;
}

但正如我所料，动画本身不同步，我不知道如何只在一个计时器上制作。

【问题讨论】：

您的意思是您希望这种情况只发生一次吗？或者设置一次计时器并定期执行？如果是后者，那就有这个东西叫setInterval。也许改用它？ w3schools.com/jsref/met_win_setinterval.asp
但这仍然是两个计时器。一个在 JS 中，一个在 CSS 中。
如果我错了，请纠正我....您尝试每 5 秒定期更改横幅来源？
是的，我想我现在明白了。不知道 CSS 过渡属性是否适用于 JS。

标签： javascript html css rotation banner

【解决方案1】：

它不需要 CSS3 动画。它所需要的只是改变图像和 CSS3 过渡属性的 JS 脚本。不知道如果 JS 正在改变某些东西，转换会起作用。

【讨论】：