Javascript影像幻燈片迭代-為什么最后一張圖片在前-有解無憂

我正在嘗試創建一個小幻燈片。幻燈片由六張圖片組成，每張圖片都有自己的標題。還有一個靜態通用標題。

下面的代碼有效，但它首先顯示最后一張影像，然后跳過第一張影像并遍歷其余影像。第一輪結束后一切正常，請問為什么會發生這種情況？

CSS

.imwrap {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    font-family: Roboto;
}

.imgsx {
    position: absolute;
    transition: opacity 1.5s ease-in;
    max-width: 99%;
    border-radius: 13px;
}

.text {
    color: white;
    font-weight: bolder;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    margin-top: 65%;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    transition: opacity 1.5s ease-in;
    width: fit-content;
    z-index: 2000;
    opacity: 0;
    display: block;
    text-align: center;
}

.numbertext {
    color: blue;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    background-color: rgba(255, 255, 255, 0.6);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    z-index: 100;
}

.imgsx .imgsx {
    opacity: 0;
}

HTML

<div class="imwrap">
  <div class="numbertext">with kind permission from picturesofengland.com</div>  
  <img class="imgsx" src="./trip/railway.webp" alt="Railway">
  <div class="text">Swanage preserved railway - by Jack Rickard &copy;</div>
  <img class="imgsx" src="./trip/boats.webp" alt="Boats">
  <div class="text">Swanage - by Jenny Fairbrother &copy;</div>
  <img class="imgsx" src="./trip/night.webp" alt="Night time">
  <div class="text">Night time on the beach - by Stephen Williams &copy;</div>
  
  <img class="imgsx" src="./trip/training.webp" alt="Training ship">
  <div class="text">Training in Swanage Harbour &copy;</div>
  <img class="imgsx" src="./trip/buffet.webp" alt="Buffet car">
  <div class="text">Buffet Car, Swanage Station - Jenny Fairbrother &copy;</div>
  <img class="imgsx" src="./trip/sunny.webp" alt="Sunny evening">
  <div class="text" style="opacity:1">A Sunny evening in Swanage - by Jill Giles &copy;</div>
</div>

javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<script>
var current = 0,
  slides = document.getElementsByClassName("imgsx");
  caps = document.getElementsByClassName("text");
setInterval(function() {
    for (var i = 0; i < slides.length; i  ) {
        slides[i].style.opacity = 0;
        caps[i].style.opacity = 0;
    }
    current = (current != slides.length - 1) ? current   1 : 0;
    slides[current].style.opacity = 1;
    caps[current].style.opacity = 1;
}, 5000);
</script>

編輯

Codepen 示例 https://codepen.io/dcsimp/pen/yLvvdwb

uj5u.com熱心網友回復：

按照@Yaver Javid的選項，可以使用css影片

但我找到了你從最后一張圖片開始的原因

它將所有影像與opacity: 1，position: abusolute并將它們放置在外部元素的同一位置，例如將紙放在桌子上，最后一個會顯示，其他人會被它隱藏。

解決方法是一開始把所有圖片opacity: 0都setTimeout設定成opacity: 1

我的編輯在這里

uj5u.com熱心網友回復：

使用 css 影片。

制作一個 div，然后使用 css 影片每 5000 毫秒更改其背景影像。你可以對文本做同樣的事情。它會快得多。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/482659.html

標籤：javascript html css

上一篇：從表單元素中獲取顏色似乎不適用于CSS變數

下一篇：如果沒有資料來，div不應該出現