javascript - 向这个 JavaScript 幻灯片添加过渡/动画？

Question

我正在尝试按照 W3Schools 教程制作一个简单的 JavaScript 幻灯片。我将如何向幻灯片类添加动画？想法是 - 您按下下一个/上一个按钮，然后 2 张幻灯片交叉淡入淡出，或者，最好的情况是，相应地向左/向右移动。

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slide");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  };
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

#sl1 {
  background-color: #F00;
}

#sl2 {
  background-color: #0F0;
}

.slide {
  width: 600px;
  height: 200px;
}

#next{
  background-color: #000;
  color: #FFF;
  width: 65px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 0;
}

#prev {
  background-color: #000;
  color: #FFF;
  width: 75px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 0;
}

<div id="prev" onclick="plusDivs(-1);fade();">Previous</div>
<div id="next" onclick="plusDivs(+1)">Next</div>
<div class="slide" id="sl1"></div>
<div class="slide" id="sl2"></div>

Answer 1

您可以更改opacity 而不是display 并添加CSS 转换。您还必须像这样调整 CSS:

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slide");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  };
  for (i = 0; i < x.length; i++) {
    x[i].style.opacity = 0;
  }
  x[slideIndex - 1].style.opacity = 1;
}

.container {
position:relative;
margin:20px;
height:200px;
}

#sl1 {
  background-color: #F00;
  position:absolute;
}

#sl2 {
  background-color: #0F0;
  position:absolute;
}

.slide {
  width: 100%;
  height: 200px;
  transition:1s;
}

#next{
  background-color: #000;
  color: #FFF;
  width: 65px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 0;
  z-index:9;
}

#prev {
  background-color: #000;
  color: #FFF;
  width: 75px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 0;
  z-index:9;
}

<div class="container">
<div id="prev" onclick="plusDivs(-1);">Previous</div>
<div id="next" onclick="plusDivs(+1)">Next</div>
<div class="slide" id="sl1" style="opacity:1"></div>
<div class="slide" id="sl2"></div>
</div>