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

Question

I have this slideshow copied from codepen.我从 codepen 复制了这张幻灯片。 I have manipulated something to make it my own.我操纵了一些东西让它成为我自己的东西。 Everything works fine but I wanted to add a fade effect and I don't know how.一切正常，但我想添加一个淡入淡出效果，我不知道怎么做。 I don't know if it will be adding something to the css file or to the javascript.我不知道它是否会在 css 文件或 javascript 中添加一些内容。 It would also be good to add the slide effect because the image just disappears and the other appears on top.添加幻灯片效果也很好，因为图像只是消失而另一个出现在顶部。

index.php 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 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
}

slideshow.js幻灯片.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

Use利用

opacity: 0;

and和

visibility: "hidden";

and not display: none;并且不显示：无； so you can add a transition with CSS for the Fade effect.因此您可以使用 CSS 添加过渡以实现淡入淡出效果。 I have modified your code and added it to the link below.我已经修改了您的代码并将其添加到下面的链接中。

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

Ps If you want a more sophisticated solution, there are some functions, for FadeIn and FadeOut effect, that you can implement and use in your js, such as this: https://www.geeksforgeeks.org/how-to-add-fade-out-effect-using-pure-javascript/#:~:text=The%20fadeOut%20effect%20is%20used,clearInterval%20method%20in%20this%20logic . 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