почему кнопка управления не работает в моем слайд-шоу? - PullRequest
Новая
       82

почему кнопка управления не работает в моем слайд-шоу?

0 голосов
/ 06 августа 2020

Я делаю слайд-шоу шириной 4 фотографии, которые отображаются с непрозрачностью: 1 и z-index: 2, и я могу заставить его запускаться автоматически, но для управления им пока нет, и это мой js код с некоторыми из jquery: 

$(document).ready(function() {
var i = 0
function next() {
    move(i++);
    if (i === 4) {
        i = 0
    }
    console.log("first i = " + i)
};
setInterval(next, 2000);
function move(n) {
    var images = document.querySelectorAll('img')
    var img = images[n]
    $(img).addClass('showSlide')
    $(img).removeClass('hideSlide')
    $(img).siblings(".img").addClass('hideSlide')
}
$('.next').click(

    () => {
        if (i === 3) {
            i = 0
        };
        move(i++);
        console.log("next i = " + i)
    }
)
$('.previous').click(
    () => {
        if (i === 0) {
            i = 3
        };
        move(i--);
        console.log("previous i = " + i)
    }
)})

мои автоматические c слайды работают, но когда я нажимаю следующую или предыдущую кнопку, слайд не продолжается с последней позиции, а мой HTML код: 

 <div class="container">
        <button class="next">next</button>
        <button class="previous">previous</button>
        <img class="img" src="gallery-img7.jpg" alt="">
        <img class="img" src="gallery-img2.jpg" alt="">
        <img class="img" src="gallery-img8.jpg" alt="">
        <img class="img" src="gallery-img3.jpg" alt="">
    </div>

Ответы [ 2 ]

0 голосов
/ 07 августа 2020

Думаю, проблема в том, как вы обрабатываете инкремент и декримент? Это хороший вариант использования по модулю%. Я также очистил и сбросил интервал после нажатия кнопки, чтобы получить тот же интервал на вновь показанном изображении. Вот пример, который, похоже, работает так, как вы предполагали: 

$(document).ready(function() {
var i = 0
function next() {
    move(i++);
};

let nextInterval = setInterval(next, 2000);
function move(n) {
    clearInterval(nextInterval)
    nextInterval = setInterval(next, 2000);
    n = i%4;
    var images = document.querySelectorAll('img')
    var img = images[n]
    $(img).addClass('showSlide')
    $(img).removeClass('hideSlide')
    $(img).siblings(".img").addClass('hideSlide')
}
$('.next').click(

    () => {
        move(i++);
    }
)
$('.previous').click(
    () => {
        move(i--);
    }
)})
.img{
  display:block;
  width:100px;
  height:100px;
}
.showSlide{
  display:block;
}
.hideSlide{
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="container">
        <button class="next">next</button>
        <button class="previous">previous</button>
        <img class="img" src="https://via.placeholder.com/100x100.png?text=1" alt="">
        <img class="img hideSlide"   src="https://via.placeholder.com/100x100.png?text=2" alt="">
        <img class="img hideSlide"  src="https://via.placeholder.com/100x100.png?text=3" alt="">
        <img class="img hideSlide" src="https://via.placeholder.com/100x100.png?text=4" alt="">
    </div>
0 голосов
/ 07 августа 2020

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

Ваши классы для отображения и hide также может неправильно прикрепляться к DOM. Я считаю хорошей практикой прикреплять менее специфичные классы c перед тем, как я прикрепляю конкретный c один, т.е. полностью скрывать все слайды, а затем показывать выбранный слайд.

Другой метод, который я считаю полезным, это сначала попытаться разобраться с ручным взаимодействием с пользователем, а затем основывать на нем свою автоматизацию. Я разработал изменение кода, который вы опубликовали, где слайды сами «скользят», вызывая следующее действие, аналогично тому, как это сделал бы пользователь.

Таким образом, слайд-шоу должно начинаться при загрузке страницы с помощью объявляемого setInterval. Этот setInterval прерывается, когда пользователь перемещает мышь в область слайд-шоу - таким образом, кнопка будет управлять активным / показанным слайдом. Если вы переместите указатель мыши в сторону от контейнера слайд-шоу, setInterval снова включится, и слайды должны автоматически переключаться между ними.

...