[英]Adding transition effect on my image slider
因此,我制作了一个简单的图像滑块,其工作原理/外观如下:
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。
您只能淡入淡出,然后淡入一个新图像,除非您计划添加另一个图像元素,该元素将位于主要图像的后面,直到主要图像完全淡出为止。
这是一个使用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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.