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）。

一个"fix"只是删除这行代码，这导致转换再次以正常时序发生：

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

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

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

Answer 1

首先你可以做的是 CSS 这会更快更有效，像这样：CSS Example

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

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

enter code here

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

Html/Javascript Slideshow Issues in looping sequence

html

javascript

css

slideshow