在我的圖像滑塊上添加過渡效果

Question

因此，我制作了一個簡單的圖像滑塊，其工作原理/外觀如下：

var image = document.getElementById("img");
var images = ["images/img1.png", "images/img2.png", "images/img3.png"];

function imageSlider(counter) {
   var total = images.length - 1;
   imageCount = imageCount + counter;

   if (imageCount > total) {
      imageCount = 0;
   }
   if (imageCount < 0) {
      imageCount = total;
   }

   image.src = images[imageCount];
}

   var timed = window.setInterval(function () {
       imageSlider(1);
}, 2000);

基本上，它只是每2秒更改html頁面上image元素的src。

是否可以在每次交換圖像時為其添加過渡效果？ 在css類中遇到了一些過渡/不透明的問題，但是沒有起作用。 所以希望我可以在這里得到一些幫助。

另外，我不使用jQuery。

Answer 1

您只能淡入淡出，然后淡入一個新圖像，除非您計划添加另一個圖像元素，該元素將位於主要圖像的后面，直到主要圖像完全淡出為止。

這是一個使用CSS過渡的單個圖像元素的示例：

 var image = document.getElementById("img"); var images = ["http://www.mariogame.info/images/icon-facebook.png", "http://icons.iconarchive.com/icons/ph03nyx/super-mario/128/Mushroom-Super-icon.png"]; var imageCount = 2; function imageSlider(counter) { var total = images.length - 1; imageCount = imageCount + counter; if (imageCount > total) { imageCount = 0; } if (imageCount < 0) { imageCount = total; } image.className = "out" setTimeout(function(){ image.src = images[imageCount]; image.className = ""; }, 500); } var timed = window.setInterval(function () { imageSlider(1); }, 2000); 

 img {transition: opacity 0.5s linear; opacity: 1; height: 100px;} .out {opacity: 0;} 

 <img id="img" src="http://icons.iconarchive.com/icons/ph03nyx/super-mario/128/Mushroom-Super-icon.png" />