несколько слайд-шоу на одной странице работают плохо - PullRequest
Новая
       6

несколько слайд-шоу на одной странице работают плохо

0 голосов
/ 05 октября 2018

новичок здесь:) Я знаю, что об этом уже спрашивали, но пока не могу найти решение.У меня есть две автоматические слайд-шоу, запускающиеся одна под другой на одной странице.они оба работают, но работают ужасно плохо, время не установлено, и оно не зацикливается, как должно быть.но - если я держу только одну слайд-шоу на странице, она работает отлично.Я борюсь с этим уже часами.

это мой 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';
}

спасибо большое!

1 Ответ

0 голосов
/ 05 октября 2018

Итак, первое, что я вижу, это то, что вы пытаетесь использовать одни и те же глобальные переменные для обоих слайд-шоу.Происходит то, что, когда оба этих вызова в 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';
}

Вскоре добавим это в скрипку, чтобы посмотреть, как оно работает и нужны ли какие-либо дополнительные настройки.

...