在我的图像滑块上添加过渡效果

Question

So, i've made a simple image slider which works/looks like this:

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

Basically, its just changing the src of the image element on my html page every 2 second.

Is it possible to add a transition effect to the images every time they swap? Messed around a bit with transition/opacity with a css class, but didn't get it to work. So hopefully i could get some help with it here.

Also, i'm not using jquery.

Answer 1

You can only fade out to nothing, and then fade in a new image unless you plan adding another image element which will be behind the main one until the main one has faded out completely.

Here's an example with a single image element using CSS transition:

 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" />