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

Question

我从 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>

estilos.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);
}

Answer 1

利用

opacity: 0;

和

visibility: "hidden";

并且不显示：无； 因此您可以使用 CSS 添加过渡以实现淡入淡出效果。 我已经修改了您的代码并将其添加到下面的链接中。

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

Ps 如果你想要一个更复杂的解决方案，有一些功能，用于 FadeIn 和 FadeOut 效果，你可以在你的 js 中实现和使用，例如： https://www.geeksforgeeks.org/how-to-add- fade-out-effect-using-pure-javascript/#:~:text=%20fadeOut%20effect%20is%20used,clearInterval%20method%20in%20this%20logic 。

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

问题描述

1 个解决方案

解决方案1
0 2020-12-10 23:07:26

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

问题描述

1 个解决方案

解决方案1 0 2020-12-10 23:07:26

解决方案1
0 2020-12-10 23:07:26