如何解决将淡入淡出的动画添加到我准备好的幻灯片中
我想做的是让我的幻灯片在改变照片的同时做一些动画,我有非常基本的幻灯片
<div class="slider-wrapper">
<div class="slider-wrapper-item " style="background-image: url(/wp-content/themes/ETL/img/slider-image-1.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-2.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-3.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-4.jpg);"></div>
<div class="slider-wrapper-item" style="background-image: url(/wp-content/themes/ETL/img/slider-image-5.jpg);"></div>
<div class="slider-play-icon"><img src="/wp-content/themes/ETL/img/play-arrow-grey.png"></div>
这是js
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("slider-wrapper-item");
console.log("slides",slides);
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides,5000); // Change image every 2 seconds
}
</script>
我找到了一篇有关如何制作淡入淡出动画的文章,但它很复杂,我对此并不满意https://cobwwweb.com/simple-looping-crossfade-image-slideshow 这是我想要的确切动画。
解决方法
if you want animation you can't use display none or block because display property does not support transition.
don't use this
slides[i].style.display = "none" and slides[slideIndex-1].style.display = "block";
instead of that make class for animation and add that class and remove whenever you want.
for example
.addAnimation{
// write your code here
}
.removeAnimation{
// write your code here
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。