Question

这里是初学者：）我知道有人问过它，但是我找不到解决方案。我有两个自动幻灯片放映在一页上一个在另一个下面进行。它们都可以工作，但是工作却很糟糕，时间安排不如预期，也没有达到应有的循环。但是-如果我在页面中仅保留一个幻灯片放映，则效果很好。我已经为之奋斗了几个小时。

这是我的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';
}

非常感谢！

Answer 1

因此，我首先看到的是您正在尝试将相同的全局变量用于两个幻灯片。发生的事情是，当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';
}

很快就会把它扔进小提琴中，以查看其运行方式以及是否需要任何其他调整。

一页上进行多个幻灯片显示效果不好

1 个答案: