Question

我必须在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;
}

但正如我所预料的那样，动画与自身同步并且我不知道如何仅在一个计时器上进行此操作。

Answer 1

它不需要CSS3动画。它所需要的只是改变图像和CSS3 trasition属性的JS脚本。如果JS正在改变某些东西，不知道过渡是否有效。

使用CSS3在JavaScript中使用动画进行横幅旋转

1 个答案: