Javascript 图片幻灯片迭代 - 为什么最后一张图片排在第一位

Question

我正在尝试创建一个小型幻灯片。幻灯片由六张图片组成，每张图片都有自己的标题。还有一个静态的通用标题。

下面的代码有效，但它首先显示最后一张图片，然后跳过第一张图片并循环访问其余图片。第一轮结束后一切正常，请问为什么会这样？

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

Answer 1

使用 css 个动画。

制作一个div，然后使用css 动画每5000 毫秒更改其背景图像。你可以对文本做同样的事情。会快很多。

Answer 2

按照@Yaver Javid的选项，可以使用css动画

但我找到了你从最后一张图片开始的原因

把所有带opacity: 1和position: abusolute的图片放在外层元素的同一个位置，就像把纸放在table上一样，最后一张会显示and其他人会躲在它旁边。

解决办法是一开始就把所有的图片都设置成opacity: 0，但是因为你用了setTimeout功能，页面加载时第一张图片会在5秒后出现，你可以设置第一张图文带opacity: 1

我的编辑是here

Javascript 图片幻灯片迭代 - 为什么最后一张图片排在第一位

Javascript image slideshow iteration - why is the last image first

html

javascript

css