添加對我的形象滑塊過渡效果

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); 

基本上，它只是改變圖像元素的src我的html頁面上的每2秒。

是否可以在每次交換圖像時向圖像添加過渡效果？ 用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" />