javascript - 为幻灯片制作适当的淡入和淡出

Question

我尝试使用 CSS 和 js 将幻灯片放映到我的 HTML 中。我想同时执行两个功能，即淡入新幻灯片和淡出当前幻灯片。

var slideIndex = 0;
var timer;

function showSlides() {
  var i;
  { 
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  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"; 
  slides[slideIndex-1].className += " fade";
  timer = setTimeout(showSlides, 10000);
}
} 

function stopSlide(){
 clearTimeout (timer);
}

function resumeSlide(){
    timer = setTimeout(showSlides, 10000);
}

function fade (){
  slides[slideIndex].className += " fadein";
  slides[slideIndex-1].className += " fadeout";
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  left: 50%;
}
/* Fading animation */
.fadein {
  -moz-animation-name: fadein;
  -moz-animation-duration: 4s;
   animation-name: fadein;
   animation-duration: 4s;
   animation-timing-function: linear;

}

.fadeout {
  -moz-animation-name: fadeout;
  -moz-animation-duration: 4s;
   animation-name: fadeout;
   animation-duration: 4s;
   animation-timing-function: linear;
}

@-moz-keyframes fadein {
            from {
transform: translateX(-1000px);
            }

            to {
transform: translateX(0px);
            }
        }


@keyframes fadein {
            from {
transform: translateX(-1000px);
            }

            to {
transform: translateX(0px);
            }
        }


@-moz-keyframes fadeout {
            from {
transform: translateX(0px);
            }

            to {
transform: translateX(1000px);
            }
        }

@keyframes fadeout {
            from {
transform: translateX(0px);
            }

            to {
transform: translateX(1000px);
            }
        }

<div id="slide"> <h1>This is my slideshow.</h1> </div> <br/>
<div class="slideshow-container container" onmouseover="stopSlide()" onmouseleave="resumeSlide()">
  <div class="mySlides">
    <div class="numbertext">1 / 5</div>
    <img src="https://via.placeholder.com/150/0000FF/808080 ?Text=Digital.com" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">2 / 5</div>
    <img src="http://placehold.it/120x120&text=image1" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">3 / 5</div>
    <img src="http://placehold.it/120x120&text=image2" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">4 / 5</div>
    <img src="http://placehold.it/120x120&text=image3" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">5 / 5</div>
    <img src="http://placehold.it/120x120&text=image4" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
</div>


<br>
<div style="text-align:center" >
  <span class="dot" onclick="dotclick()"></span> 
  <span class="dot"></span> 
  <span class="dot"></span>
   <span class="dot"></span> 
  <span class="dot"></span> 
</div>

我有点陷入死胡同，因为这是我的第一次尝试。我为 slider 使用了 w3schools 的模板。

提前致谢。

Answer 1

为了使转换有效，display 应该被移除。 Transitions 不适用于使用纯 JavaScript 的 display。我在 for-loops 中添加了几行代码来设置不透明度和过渡时间。我还为 div 元素添加了两个 .css 类，当 div 为 active 时，我给这些类定位和 div 元素的宽度。同样出于演示目的，我将时间从 10 秒减少到 3 秒。我还删除了很多与动画有关的不需要的代码。我没有触及 dots 代码，所以你必须弄清楚你想用它做什么。我尽量不根据您的要求过多更改代码。我只是删除了不需要的东西。希望这至少能帮助您解决转换问题。

.mySlides{
  position: absolute;
  opacity: 0;
  width: 100%;
}

.mySlides.active{
  position: static;
  opacity: 1;
  width: 100%;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  left: 50%;
  position: static;
}

<div id="slide"> <h1>This is my slideshow.</h1> </div> <br/>
<div class="slideshow-container container" onmouseover="stopSlide()" onmouseleave="resumeSlide()">
  <div class="mySlides">
    <div class="numbertext">1 / 5</div>
    <img src="https://via.placeholder.com/150/0000FF/808080 ?Text=Digital.com" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">2 / 5</div>
    <img src="http://placehold.it/120x120&text=image1" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">3 / 5</div>
    <img src="http://placehold.it/120x120&text=image2" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">4 / 5</div>
    <img src="http://placehold.it/120x120&text=image3" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <div class="mySlides">
    <div class="numbertext">5 / 5</div>
    <img src="http://placehold.it/120x120&text=image4" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
</div>


<br>
<div style="text-align:center" >
  <span class="dot" onclick="dotclick()"></span> 
  <span class="dot"></span> 
  <span class="dot"></span>
   <span class="dot"></span> 
  <span class="dot"></span> 
</div>
<script>
var slideIndex = 0;
var timer;

function showSlides() {
  var i;
  { 
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.transition  = "3.0s";
    slides[i].style.opacity = "0";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", " ");
  }
   slides[slideIndex-1].style.transition  = "3.0s";
   slides[slideIndex-1].style.opacity = "1";
 
  dots[slideIndex-1].classList.add("active"); 
  
  timer = setTimeout(showSlides, 3000);
}
} 

function stopSlide(){
 clearTimeout (timer);
}

function resumeSlide(){
    timer = setTimeout(showSlides, 3000);
}


</script>