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

我尝试通过透明度过渡进行幻灯片放映，但是问题是当我有4张图像而第4张图像随着第1张，第1张图像而改变时，可能以某种方式显示得较早而将第3张图像向下推。另一个问题是，当第3张图像更改为第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>

最佳答案

问题是您将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;
    ...
}

关于javascript - 幻灯片一次显示2张图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44959594/