javascript - 需要将淡入添加到图像 om 幻灯片

Question

我需要在幻灯片放映的现有代码中为我的图像添加淡入淡出动画。当用户单击按钮时，图像必须淡入/淡出。这是我的代码。

HTML:

<div id="imageSlider">

  <button id="prevBTN" onclick="prev()"> <b>Prev</b> </button>

  <button id="nextBTN" onclick="next()"> <b>Next</b> </button>
</div>

---

Javascript:

var images = [
  "HTMLcert.jpg",
  "CSScert.jpg",
  "javaScriptCert.jpg",
  "PHPcert.jpg"
];

var num = 0;

function next() {
  var slider =
    document.getElementById("slider");
  num++;
  if (num >= images.length) {
    num = 0;
  }
  slider.src = images[num];
}

function prev() {
  var slider =
    document.getElementById("slider");
  num--;
  if (num <= 0) {
    num = images.length - 1;
  }
  slider.src = images[num];
}

---

如何将淡入淡出添加到现有的 java 脚本代码中。

Answer 1

您可以像这样在 javascript 函数中向事件 slider 元素添加和删除类:

var slider = document.getElementById("slider");
slider.className += " active";
setTimeout(function(){
  slider.classList.remove("active");
}, 100);

然后你的 css 看起来像这样:

.active {
   animation: fade 1s;
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1 }
}