如何在Vanilla Javascript中创建图像阵列元素之间的淡入/淡出过渡-非背景图像 [英] How to create fade in/out transitions between elements of image array in Vanilla Javascript - non background image
问题描述
我最近正在玩一些Javascript，并且尝试使用不包含jQuery之类库的Vanilla Javascript创建一个小型幻灯片显示-实际上，在这个小项目中，我想学习如何在实际网站中使用和实现它.
I was recently playing with some Javascript - and I was trying a create a small slideshow using only Vanilla Javascript with no libraries such as jQuery - in fact in this small project I want to learn how to use and implement it in real website.
这是我的HTML标记:
Here is my HTML markup:
<body onload="changeImage()">
<div class="logo">
<img src="logo.png" class="logo_image" id="imageholder"/>
</div>
我的想法是使用其中带有img标签的HTML div容器-在Javascript程序的每次迭代中，图像都会淡出，更改其来源，然后它将淡入新图像中，依此类推.在这一点上，我已经创建了一个糟糕的解决方案，该解决方案只能将这个想法结合在一起:
My idea was to use a HTML div container with img tag in it - in each iteration in Javascript program the image will fade out, change it's source and then it will fade in back with new image - and so on. At this point I've created an awful solution what only holds the idea together:
function changeImage()
{
var imgArray = new Array();
imgArray[0] = "logo.png";
imgArray[1] = "logo2.png";
imgArray[2] = "logo3.png";
imgArray[3] = "logo4.png";
imgArray[4] = "logo5.png";
var i = 0;
var container = document.getElementById("imageholder");
setInterval(() => {
if(i == 5)
{
i = 0;
}
fadeout(container);
container.src = imgArray[i];
fadein(container);
i++;
}, 2500)
}
function fadeout(container)
{
var op = 1;
var timer = setInterval(() => {
if (op <= 0.0)
{
clearInterval(timer);
}
container.style.opacity = op;
op -=0.1;
}, 1);
}
function fadein(container)
{
var op = 0.0;
var timer = setInterval(() => {
if (op >= 1)
{
clearInterval(timer)
}
container.style.opacity = op;
op += 0.1;
}, 100)
}
我的幻灯片没有流畅地执行，而是先闪烁新图像，然后淡入淡出.我知道我应该对其进行优化，但是如何?
Instead of doing it fluently my slideshow is first blinking with new image and then is fading in with it. I know that I should optimize it but how?
我知道有更好的解决方案，但是到目前为止，我一直未能找到适合我想法的解决方案.
I know there are a much better solutions but up to now I failed badly to find any good fit to my idea.
推荐答案
我认为一种可行的解决方案是利用具有opacity属性的css过渡.然后使用JavaScript添加/删除相应的CSS类.
I think one possible solution is to utilize css transitions with the opacity property. Then use JavaScript to add/remove the appropriate css class.
//get all the imgs in the "slide" div and change to an array of img objects
var slide = document.getElementById("slide");
var arr = Array.prototype.slice.call(slide.children);
//initialize css
arr.map(function(imgObj) {
imgObj.classList.add("slide-img");
});
//showing the first slide
arr[0].classList.add("show");
//initializing values
var currentSlide = 1;
var slideLength = slide.children.length;
var prevSlide = 0;
//interval function
setInterval(function() {
if (currentSlide >= slideLength)
currentSlide = 0;
arr[prevSlide].classList.remove("show");
arr[currentSlide].classList.add("show");
prevSlide = currentSlide;
currentSlide++;
}, 5000)#slide img {
position: absolute;
}
.slide-img {
opacity: 0;
transition: opacity 2s;
}
.show {
opacity: 1;
}<div id="slide">
<img src="https://via.placeholder.com/468x160?text=img1" />
<img src="https://via.placeholder.com/468x160?text=img2" />
<img src="https://via.placeholder.com/468x160?text=img3" />
</div>这篇关于如何在Vanilla Javascript中创建图像阵列元素之间的淡入/淡出过渡-非背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
