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页面上更改图像元素的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" />

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

1 个答案: