Question

我创建了一个JS / CSS图像旋转器，可以在我网站的某个部分旋转5个不同的图像，在CSS中有淡入/淡出效果。

在桌面/笔记本电脑上，图像旋转非常流畅，尽管每次循环大约一次，图像会闪烁并快速跳到下一个。造成这种情况的原因是什么？

来源： -

CSS

@keyframes fadeinout {
0%, 100% { opacity: 0; }
50%   { opacity: 1; }
}

#rotator {
  animation: fadeinout 3s;
}

JS

function clientRotator(){

  var section = document.getElementById("clients");
  var clientImg = document.createElement("img");
  clientImg.setAttribute("id", "rotator");
  section.appendChild(clientImg);
  clientImg.src = "assets/exxon-mobil.png";
  var imgArray = ["assets/shell.png", "assets/bp.png", "assets/talisman.png", "assets/cnr-international.png", "assets/exxon-mobil.png"];

  var delaySeconds = 3;
  var iteration = 0;

  setInterval(function(){

    section.removeChild(clientImg);
    clientImg = document.createElement("img");
    clientImg.setAttribute("id", "rotator");
    section.appendChild(clientImg);
    clientImg.src = imgArray[iteration];
    clientImg.setAttribute("alt", "Oil & Gas - Gas Turbine Overhauls");

    if (iteration < imgArray.length-1){
      iteration += 1;
    }
    else {
      iteration = 0;
    }
  }, delaySeconds * 1000)

}

Answer 1

闪烁是由js和css的小异步引起的，你可以通过将css动画从3s减少到2s来引起闪烁（用于测试）。

要修复它，只需添加到#rotator属性opacity: 0;。

Javascript图像旋转器偶尔会闪烁

1 个答案: