Несколько экземпляров слайд-шоу разбивают код - PullRequest
Новая
       33

Несколько экземпляров слайд-шоу разбивают код

0 голосов
/ 01 марта 2019

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

JAVASCRIPT 

//SLIDESHOW
const slideshow = document.querySelector("section.slideshow")
const images = slideshow.querySelectorAll("img")

slideshow.addEventListener("mousemove", function (event) {
const x = event.offsetX
const width = this.offsetWidth
const percentage = x / width
const imageNumber = Math.floor(percentage * images.length)

images.forEach(image => {
    image.style.zIndex = 0
})

images[imageNumber].style.zIndex = 1

})

HTML 

<section class ="slideshow">
    <img src="assets/images/1.png">
    <img src="assets/images/3.png">
    <img src="assets/images/2.png">
</section>

1 Ответ

0 голосов
/ 01 марта 2019

document.querySelector("section.slideshow") всегда будет выбирать первый элемент <section class="slideshow">, с которым он встречается.

Если вы хотите, чтобы один и тот же код мог обрабатывать несколько элементов слайд-шоу, вам нужно будет выделить все их в NodeList и запустите код инициализации для каждого экземпляра.

Должно быть что-то вроде этого: (не проверено) 

const slideshow_instances = document.querySelectorAll("section.slideshow")

for (var i = 0; i < slideshow_instances.length; i++) {
    const slideshow = slideshow_instances[i];
    const images = slideshow.querySelectorAll("img")

    slideshow.addEventListener("mousemove", function (event) {
    const x = event.offsetX
    const width = this.offsetWidth
    const percentage = x / width
    const imageNumber = Math.floor(percentage * images.length)

    images.forEach(image => {
        image.style.zIndex = 0
    })

    images[imageNumber].style.zIndex = 1

    })
}
...