为幻灯片添加淡入淡出效果

我从codepen复制了这个幻灯片。我操纵了一些东西，使它成为我自己的东西。一切都很好，但我想添加一个渐变效果，我不知道怎么做。我不知道它是在css文件中还是在javascript中添加一些内容。添加幻灯片效果也很好，因为图像刚刚消失，另一个出现在顶部。

index.php

<html>
<head>
<meta charset="UTF-8">
<title></title>
<LINK REL=StyleSheet HREF="estilos.css" TYPE="text/css">
<script src="slideshow.js"  type="text/javascript"></script>
</head>
<body>
<div class="slideshow-container">
<div class="slideshow-inner">
<div class="mySlides fade">
<img  src='imagenes/uno.jpg' style='width: 100%;' alt="sally lightfoot crab"/>    
</div>
<div class="mySlides fade">
<img  src='imagenes/dos.jpg' style='width: 100%;' alt="fighting nazca boobies"/>   
</div>
<div class="mySlides fade">
<img  src='imagenes/tres.jpg' style='width: 100%;' alt="otovalo waterfall"/>   
</div>
<div class="mySlides fade">
<img  src='imagenes/tres.jpg' style='width: 100%;' alt="pelican"/>    
</div>  
</div>
<a class="prev" onclick='plusSlides(-1)'>&#10094;</a>
<a class="next" onclick='plusSlides(1)'>&#10095;</a>
</div>
<br/>
</div>                
</body>
</html>

估计.css

.slideshow-container {
/*max-width: 100px;*/
width:100%;
position: relative;
margin: auto;

}
.mySlides {
display: none;
/*height: 400px;*/
/*border: solid 1px black;*/

}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: #222428;
font-weight: bold;
font-size: 30px;
transition: .6s ease;
border-radius: 0 3px 3px 0
}
.next {
right: 0px;
border-radius: 3px 3px 3px 3px
}
.prev {
left: 0px;
border-radius: 3px 3px 3px 3px
}
.prev:hover,
.next:hover {
color: #f2f2f2;
background-color: rgba(0, 0, 0, 0.8)
}
.text {
color: #f2f2f2;
font-size: 15px;
padding-top: 12px;
padding-bottom: 12px;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
background-color: #222428
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color .6s ease
}
.active,
.dot:hover {
background-color: #717171
}

幻灯片.js

var slideIndex = 1;
var myTimer;
var slideshowContainer;
window.addEventListener("load",function() {
showSlides(slideIndex);
myTimer = setInterval(function(){plusSlides(1)}, 2000);

//COMMENT OUT THE LINE BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME
slideshowContainer = document.getElementsByClassName('slideshow-inner')[0];

//UNCOMMENT OUT THE LINE BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME
//slideshowContainer = document.getElementsByClassName('slideshow-container')[0];

// slideshowContainer.addEventListener('mouseenter', pause)
//slideshowContainer.addEventListener('mouseleave', resume)
})
// NEXT AND PREVIOUS CONTROL
function plusSlides(n){
clearInterval(myTimer);
if (n < 0){
showSlides(slideIndex -= 1);
} else {
showSlides(slideIndex += 1); 
}

//COMMENT OUT THE LINES BELOW TO KEEP ARROWS PART OF MOUSEENTER PAUSE/RESUME

if (n === -1){
myTimer = setInterval(function(){plusSlides(n + 2)}, 2000);
} else {
myTimer = setInterval(function(){plusSlides(n + 1)}, 2000);
}
}
//Controls the current slide and resets interval if needed
function currentSlide(n){
clearInterval(myTimer);
myTimer = setInterval(function(){plusSlides(n + 1)}, 2000);
showSlides(slideIndex = n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("mySlides");
//var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
/*
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}*/
slides[slideIndex-1].style.display = "block";
//dots[slideIndex-1].className += " active";
}
pause = () => {
clearInterval(myTimer);
}
resume = () =>{
clearInterval(myTimer);
myTimer = setInterval(function(){plusSlides(slideIndex)}, 2000);
}

使用

opacity: 0;

和

visibility: "hidden";

而非显示：无，这样您就可以使用CSS为渐变效果添加一个过渡。我已经修改了你的代码，并将其添加到下面的链接中。

https://jsfiddle.net/8hdt4rfu/3/

附言：如果你想要一个更复杂的解决方案，你可以在js中实现和使用一些函数，比如FadeIn和FadeOut效果：https://www.geeksforgeeks.org/how-to-add-fade-out-effect-using-pure-javascript/#:~：text=%20fadeOut%20effect%20已使用，clearInterval%20method%20in%20此%20逻辑。

相关内容

最新更新

热门标签：