幻燈片放映一次顯示2張圖片

Question

我嘗試通過透明度進行幻燈片放映，但問題在於當我有4張圖像和第4張圖像隨第1張，第1張圖像發生變化，可能以某種方式顯示較早並將第3張圖像向下推。另一個問題是，第三張圖像隨着第四張，第四張圖像的變化不會像所有其他圖像一樣在其下方創建一些可用空間（如果分辨率較差，則可能無法看到）。當我添加超過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; 
    ... 
}