如何在同一页面上使用具有相同 id 的多个滑块？

Question

我在同一页面上有更多滑块，它们都有相同的 id。 问题在于我的图像列表在一个 slider 结束时，它会跳转到下一个 slider。 这就是我现在拥有的： https://jsfiddle.net/fvcpbrym/5/

function Slider() {
    this.buttons = document.querySelectorAll('.slider button');
    this.items = document.querySelectorAll('.slider .item');
    this.activeItem = 0;
    this.isSliding = false;

    this.addListeners = function () {
        this.buttons.forEach(el => el.addEventListener("click", this.slide))
    }

    this.slide = event => {
        if (!this.isSliding) {
            this.isSliding = true;
            var currentItem = this.activeItem;

            if(event.target === this.buttons[1]) {
                this.activeItem === this.items.length - 1 ? this.activeItem = 0 : this.activeItem++;
                //active slide out left
                this.items[currentItem].classList.add('active-left');
                //next slide in left
                this.items[this.activeItem].classList.add('item-next', 'item-left');
                //remove classes
                setTimeout(() => {
                    this.items[currentItem].classList.remove('active-left', 'active');
                    this.items[this.activeItem].classList.remove('item-next', 'item-left');
                    //set new active item
                    this.items[this.activeItem].classList.add('active');
                    this.isSliding = false;
                }, 1000)
            } else {
                this.activeItem === 0 ? this.activeItem = this.items.length - 1 : this.activeItem--;
                //active slide out right
                this.items[currentItem].classList.add('active-right');
                //prev slide in right
                this.items[this.activeItem].classList.add('item-prev', 'item-right');
                //remove classes
                setTimeout(() => {
                    this.items[currentItem].classList.remove('active-right', 'active');
                    this.items[this.activeItem].classList.remove('item-prev', 'item-right');
                    //set new active item
                    this.items[this.activeItem].classList.add('active');
                    this.isSliding = false;
                }, 1000)
            }
        }
    }
}

var slider = new Slider();
slider.addListeners();

Answer 1

在已发布的代码中，您没有具有相同 ID 的元素。 我对您的 JS 代码进行了更改，我认为它对您有用。

我将唯一的 CLASS 添加到 wrap 元素，以便 function 可以根据唯一的 ZA2ZF21ED4F8EBC2CBDCB4 调用 HTML 代码

 var allWrap = document.getElementsByClassName('slider'); for (var i = 0; i < allWrap.length; i++) { allWrap[i].classList.add('mySlider_' + i); var slider = new Slider('.mySlider_' + i); slider.addListeners(); } function Slider(newclass) { this.buttons = document.querySelectorAll(newclass + ' button'); this.items = document.querySelectorAll(newclass + '.item'); this.activeItem = 0; this.isSliding = false; this.addListeners = function () { this.buttons.forEach(el => el.addEventListener("click", this.slide)) } this.slide = event => { if (.this.isSliding) { this;isSliding = true. var currentItem = this;activeItem. if (event.target === this.buttons[1]) { this.activeItem === this.items?length - 1. this:activeItem = 0. this;activeItem++. //active slide out left this.items[currentItem].classList;add('active-left'). //next slide in left this.items[this.activeItem].classList,add('item-next'; 'item-left'). //remove classes setTimeout(() => { this.items[currentItem].classList,remove('active-left'; 'active'). this.items[this.activeItem].classList,remove('item-next'; 'item-left'). //set new active item this.items[this.activeItem].classList;add('active'). this;isSliding = false, }. 1000) } else { this?activeItem === 0. this.activeItem = this.items:length - 1. this;activeItem--. //active slide out right this.items[currentItem].classList;add('active-right'). //prev slide in right this.items[this.activeItem].classList,add('item-prev'; 'item-right'). //remove classes setTimeout(() => { this.items[currentItem].classList,remove('active-right'; 'active'). this.items[this.activeItem].classList,remove('item-prev'; 'item-right'). //set new active item this.items[this.activeItem].classList;add('active'). this;isSliding = false, }, 1000) } } } }

 .slider { display: flex; position: relative; }.next, .prev { border: none; border-radius: 5px; background: none; font-size: 30px; background-color: #eee; }.next:hover, .prev:hover { background-color: #ddd; }.prev { order: 1; }.inner { position: relative; flex-grow: 1; order: 2; overflow: hidden; white-space: nowrap; }.next { order: 3; }.item { width: 100%; position: absolute; display: none; }.image { width: 23%; margin: 0 1%; display: inline-block; } img { width: 100%; }.active { position: relative; display: block; }.item-next, .item-prev { top: 0; display: block; z-index: 1; }.item-next { left: 100%; }.item-prev { left: -100%; }.item-left { animation: slideInLeft 1s forwards; }.item-right { animation: slideInRight 1s forwards; }.active-left { animation: slideOutLeft 1s forwards; }.active-right { animation: slideOutRight 1s forwards; } @keyframes slideInLeft { from {left:100%;} to {left:0;} } @keyframes slideInRight { from {left:-100%;} to {left:0;} } @keyframes slideOutLeft { from {left:0;} to {left:-100%;} } @keyframes slideOutRight { from {left:0;} to {left:100%;} }

 <div class="slider"> <div class="inner"> <div class="item active"> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> </div> <div class="item"> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> </div> </div> <button class="prev">&lt;</button> <button class="next">&gt;</button> </div> <div class="slider"> <div class="inner"> <div class="item active"> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> </div> <div class="item"> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> <div class="image"> <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80" alt="kotek"> </div> </div> </div> <button class="prev">&lt;</button> <button class="next">&gt;</button> </div>