时间戳

首页 > 解决方案 > 一页上的多个幻灯片效果不好

javascript - 一页上的多个幻灯片效果不好

问题描述

这里是初学者:) 我知道以前有人问过，但我还没有找到解决方案。我有一页上有两个自动幻灯片，一个在另一个之下。他们都工作，但工作得非常糟糕，时间没有设定好，也没有像应该的那样循环。但是 - 如果我在页面中只保留一个幻灯片，它工作得非常好。我已经为此苦苦挣扎了好几个小时。

这是我的html：

        <div class= "gallry">
        <ul id="slides" dir="rtl" onclick="nextSlide">

            <li class="slide showing"> <img id="firstImg" src=".img.jpg"> </li>
            <li class="slide"> <img src=".img1.jpg"></li>
            <li class="slide"><img src=".img2.jpg"></li>
        </ul>  
    </div>





    <div class="gallery">
        <ul id="slides2" dir="rtl">


            <li class="slidetwo showing"> <img id="firstImg2" src=".img3.jpg"></li>
            <li class="slidetwo"><img src=".img4.jpg"></li>
            <li class="slidetwo"><img src=".img5.jpg"></li>

        </ul>
    </div>

这是我的CSS

#slides {
    position: relative;
    height: 100%;
    padding: 0;
    margin:0;
    list-style-type: none;
}

#slides2 {
    position: relative;
    height: 100%;
    padding: 0;
    margin:0;
    list-style-type: none;
}

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}


.slidetwo {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}


img {
    max-height: 95vh;
    max-width: calc(100vw - 80px);
}

.showing {
    opacity: 1;
    z-index: 2;
}

这是我的javascript：

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);

function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}


var slides2 = document.querySelectorAll('#slides2 .slidetwo');
var currentSlide = 0;
var slideInterval = setInterval(nextSlideTwo,1000);

function nextSlideTwo() {
    slides2[currentSlide].className = 'slidetwo';
    currentSlide = (currentSlide+1)%slides2.length;
    slides2[currentSlide].className = 'slidetwo showing';
}

多谢 ！

标签： javascriptslideshow

解决方案

所以我看到的第一件事是你试图为两个幻灯片重用相同的全局变量。发生的情况是，当这两个调用setInterval()都在运行时，它们正在处理相同的变量，这将导致图像显示无序、时序问题和其他类似问题。

我建议尝试将变量分开，以便在它们运行时解决和更新不同的东西nextSlide()。nextSlideTwo()例如：

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);

function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}


var slides2 = document.querySelectorAll('#slides2 .slidetwo');
var currentSlide2 = 0;
var slideInterval2 = setInterval(nextSlideTwo,1000);

function nextSlideTwo() {
    slides2[currentSlide2].className = 'slidetwo';
    currentSlide2 = (currentSlide2+1)%slides2.length;
    slides2[currentSlide2].className = 'slidetwo showing';
}

很快就会把它扔进小提琴，看看它是如何运行的，以及是否需要任何额外的调整。

推荐阅读