需要将淡入添加到图像 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 函数中的活动滑块元素中添加和删除类，如下所示：

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

Answer 2

您可以使用 CSS3 宣布 ，通过创建自定义动画 ，使用最后一个添加类，然后在单击按钮的同时切换类。

下面是一个工作片段：

var images = [
  "http://ramg1.net/images/3.jpg",
  "https://www.gregbowe.com/assets/img/htmlcert.jpg",
  "http://www.lordlamer.de/wp-content/uploads/2011/02/php-cert.jpg",
  "http://www.michellekeselgiancola.com/images/certs/uploads/phpcert.jpg"
];
var num = 0;
function next() {
  var slider =
    document.getElementById("slider");
  num++;
  if (num >= images.length) {
    num = 0;
  }
  
  slider.classList.remove("fade");
  slider.src = images[num];
  setTimeout(function(){slider.classList.add("fade");},10);
  //slider.classList.add("fade");
}
function prev() {
  var slider =
    document.getElementById("slider");
  num--;
  if (num <= 0) {
    num = images.length - 1;
  }
  
  slider.classList.remove("fade");
  slider.src = images[num];
  setTimeout(function(){slider.classList.add("fade");},10);
  //slider.classList.add("fade");
}

/* create the fade custom annimation wich set 0 to 1 opacity on an element */
@-webkit-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
/* create the class that trigger the annimation */
.fade {
  -webkit-animation: fade 2s ease; /* Safari 4+ */
  -moz-animation:    fade 2s ease; /* Fx 5+ */
  -o-animation:      fade 2s ease; /* Opera 12+ */
  animation:         fade 2s ease; /* IE 10+, Fx 29+ */
}

<div id="imageSlider">
  <img id="slider" class="fade" src="http://ramg1.net/images/3.jpg" width="400px" height="80%" />
  <button id="prevBTN" onclick="prev()"> <b>Prev</b> </button>
  <button id="nextBTN" onclick="next()"> <b>Next</b> </button>
</div>