javascript - 幻灯片一次显示 2 张图片

Question

我尝试通过透明过渡制作幻灯片放映，但问题是当我有 4 张图像和第 4 张图像与第 1 张图像发生变化时，第 1 张图像可能以某种方式提前显示并将第 3 张图像向下推。另一个问题是当第 3 个图像与第 4 个图像发生变化时，第 4 个图像不会像所有其他图像一样在他下面创建一些自由空间(如果分辨率不佳，它可能不可见)。当我添加超过 4 张图像并且总是只在最后一张图片上时，也会出现此问题。关于如何解决它以及我做错了什么有什么建议吗？

var slides = document.querySelectorAll('.imageSlide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 2000);

function nextSlide() {
  slides[currentSlide].className = "imageSlide";
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].className = "imageSlide showing";
}

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

.imageSlide-container {
  position: relative;
  margin: auto;
}

.imageSlide {
  position: absolute;
  width: 100%;
  height: auto;
  opacity: 0;
  z-index: 1;
  -webkit-transition: opacity 1.0s;
  -moz-transition: opacity 1.0s;
  -o-transition: opacity 1.0s;
  transition: opacity 1.0s;
}

.showing {
  position: static;
  opacity: 1;
  z-index: 2;
  transform: translateZ(0);
}

.prev,
.next {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: auto;
  cursor: pointer;
  margin-top: -22px;
  padding: 15px;
  color: red;
  font-size: 18px;
  font-weight: bold;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8)
}

@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

<div class="imageSlide-container">
  <img class="imageSlide showing" src="https://www.w3schools.com/howto/img_nature_wide.jpg">
  <img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg">
  <img class="imageSlide" src="https://www.w3schools.com/howto/img_mountains_wide.jpg">
  <img class="imageSlide" src="https://www.w3schools.com/howto/img_fjords_wide.jpg">

  <span class="prev" onclick="plusSlide-button(-1)">&#10094;</span>
  <span class="next" onclick="plusSlide-button(1)">&#10095;</span>
</div>
<a>test text</a>
<a>test text</a>
<a>test text</a>

Answer 1

问题是您对一个元素使用position: absolute 和 position: static。

.container {
  position: relative;
}

.item {
  position: absolute;
}

.showing {
  position: static;
  border: 1px solid;
}

<div class="container">
  <div class="item showing">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

这就是您出现这种奇怪行为的原因。每个元素都必须在顶部。

.item {
    position: absolute;
    top: 0;
}

分别

.imageSlide {
    position: absolute;
    top: 0;
    ...
}