[英]Smooth transition between each images
我的项目中有这个幻灯片,但是在图像之间切换时看起来很突然。 换句话说,我希望它在它们之间平滑地变化。
<div>
<img class="mySlides" src="assets/img/big_logo_1.svg" max-width="100%">
<img class="mySlides" src="assets/img/big_logo_2.svg" max-width="100%">
<img class="mySlides" src="assets/img/big_logo_3.svg" max-width="100%">
</div>
.mySlides {display:none; max-width: 100%;}
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000); // Change image every 3 seconds
}
使用 css 过渡和以绝对方式定位的图像,您可以通过对代码进行一些调整来实现它:
<div class="carousel">
<img class="mySlides" src="https://source.unsplash.com/random">
<img class="mySlides" src="https://source.unsplash.com/random/?cat">
<img class="mySlides" src="https://source.unsplash.com/random/?dog">
</div>
.carousel{
max-width: 100%;
position: relative;
height: auto;
}
img{
width: 100%;
position: absolute;
left: 0;
top: 0;
display: block;
transition: 0.3s opacity ease-in-out;
}
padding: 0;
var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.opacity = 0; } myIndex++; if (myIndex > x.length) { myIndex = 1 } x[myIndex - 1].style.opacity = 1; setTimeout(carousel, 3000); // Change image every 3 seconds }
.carousel { max-width: 100%; position: relative; height: auto; } img { width: 100%; position: absolute; left: 0; top: 0; display: block; transition: 0.3s opacity ease-in-out; }
<div class="carousel"> <img class="mySlides" src="https://source.unsplash.com/random"> <img class="mySlides" src="https://source.unsplash.com/random/?cat"> <img class="mySlides" src="https://source.unsplash.com/random/?dog"> </div>
我希望它会帮助你。
.logo-container { position: relative; }.bannerImg01 { animation: bannerImg01 15s infinite; }.bannerImg02 { position: absolute; top: 0; left: 0; animation: bannerImg02 15s infinite; }.bannerImg03 { position: absolute; top: 0; left: 0; animation: bannerImg03 15s infinite; } @keyframes bannerImg01 { 0% {opacity: 1;} 20.833333% {opacity: 1;} 33.333333% {opacity: 0;} 87.5% {opacity: 0;} 100% {opacity: 1} } @keyframes bannerImg02 { 0% {opacity: 0;} 20.833333% {opacity: 0;} 33.333333% {opacity: 1;} 54.166666% {opacity: 1;} 66.666666% {opacity: 0;} 100% {opacity: 0;} } @keyframes bannerImg03 { 0% {opacity: 0;} 54.166666% {opacity: 0;} 66.666666% {opacity: 1;} 87.5% {opacity: 1;} 100% {opacity: 0;} }
<div class="logo-container"> <img class="bannerImg01" src="assets/img/big_logo_1.svg" max-width="100%"> <img class="bannerImg02" src="assets/img/big_logo_2.svg" max-width="100%"> <img class="bannerImg03" src="assets/img/big_logo_3.svg" max-width="100%"> </div>
/* The animation code */
@keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
/* The element to apply the animation to */
.mySlides {
animation-name: example;
animation-duration: 4s;
}
添加类似这样的内容将允许您指定图像的显示方式。 换句话说,查看 css 动画。 来源: https://www.w3schools.com/css/css3_animations.asp
而不是使用display:block/none
使用opacity:0/1
并添加一个transition:opacity 300ms ease
以使其平滑,如下所示:
.mySlides {
opacity:0;
max-width: 100%;
transition:opacity 300ms ease
}
.mySlides.active {opacity:1}
在 javascript
var x = [...document.getElementsByClassName("mySlides")];
var current = 0
function carousel(){
x.forEach(el=>el.classList.remove('active'))
current=current<x.length-1?current+1:0;
x[current].classList.add('active');
}
setInterval(carousel,3000)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.