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

Question

我有一个非常简单的 javascript 循环，它会循环播放预设数量的图像，并不断地从一张淡出到下一张。这是 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