循环序列中的 Html/Javascript 幻灯片问题

Question

我有一个非常简单的 javascript 循环，它将循环通过预设数量的图像并不断地从 1 淡入到下一个。这是 HTML、CSS 和 Javascript 代码：

HTML：

<div class="full-width-slideshow">
            <div class="large-slideshow-image" style="height:100px; width: 100%; background-color: blue;"></div>
            <div class="large-slideshow-image" style="height:100px; width: 100%; background-color: green;"></div>
            <div class="large-slideshow-image" style="height:100px; width: 100%; background-color: yellow;"></div>
            <div class="large-slideshow-image" style="height:100px; width: 100%; background-color: red;"></div>
</div>

CSS

.large-slideshow-image {
position: absolute;
z-index:1; }

Javascript

var slideIndex = 0;
var previousSlideIndex = 4;

function carousel(){
var i = 0;
var x = document.getElementsByClassName("large-slideshow-image");

for(i = 0; i < x.length; i++){
    x[i].style.display = "none";
}
slideIndex ++;

if(slideIndex > x.length){
    slideIndex = 1;
}

x[previousSlideIndex - 1].style.display = "block";
x[previousSlideIndex - 1].style.zindex = 1;
x[slideIndex - 1].style.zIndex = 5;
var op = 0.1;  // initial opacity fadein
x[slideIndex - 1].style.opacity = op
x[slideIndex - 1].style.display = "block";
var timer = setInterval(function () {
    if (op >= 1){
        clearInterval(timer);
    }
    x[slideIndex - 1].style.opacity = op;
    x[slideIndex - 1].style.filter = 'alpha(opacity=' + op * 100 + ")";
    op += op * 0.1;

}, 20);

previousSlideIndex = slideIndex;

setTimeout(carousel, 4000); }

我还设置了轮播功能以在正文中使用 onload 触发。

一切正常，除了幻灯片从最后一个元素到第一个元素的过渡出现故障。它不是在所有其他元素之间进行恒定转换（淡入最后一个元素），而是最后一个元素（在我的情况下为红色 div）显示持续时间的两倍，然后按顺序显示下一个元素（蓝色 div )，然后直接进入下一个元素的淡入（绿色 div）。它基本上跳过了序列中第一个元素的淡入（蓝色 div）。

一个“修复”只是删除这行代码，这会导致转换再次以正常时序发生：

x[previousSlideIndex - 1].style.display = "block";

但是，这会导致 div 从白色背景淡入，而我希望它们淡入幻灯片的前一张图像。

我找不到发生这种情况的任何原因，也找不到解决方法。我宁愿不使用 CSS 进行过渡。任何帮助将不胜感激！

Answer 1

首先你可以用 CSS 来做这件事，它会更快更高效，就像这样：CSS Example

你可以简单地使用这个：JS Example

但是，是的，我几年前也遇到过同样的问题，解决方案是将最后一张照片作为第一张照片，这样当它开始循环时，它不会出现故障加载它，这就是你得到的，所以只需在最后添加另一张与第一张相同的照片，并相应地调整过渡时间。

enter code here