滑块-上一个按钮隐藏第一张幻灯片，而不是上一张幻灯片

Question

我创建了一些CSS和JavaScript，将WordPress的本机库变成了幻灯片。 对于每个画廊，我都有下一个和上一个按钮，这些按钮在单击时显示每个幻灯片。

问题是单击以显示上一张幻灯片时，它仅显示第一张幻灯片。 我认为这是因为位于click函数之外的初始计数器被设置为0。是否有任何方法可以跟踪每个函数之间计数器在哪个幻灯片上滑动，或者可以自行调整函数？

这是JavaScript：

function() {
...
    var gallery = document.querySelectorAll('.single.slider .gallery');

    var galleries = [   document.querySelector('.single.slider #gallery-1'),
                        document.querySelector('.single.slider #gallery-2') ];

    var slides = [  document.querySelectorAll('.single.slider #gallery-1 .gallery-item'),
                    document.querySelectorAll('.single.slider #gallery-2 .gallery-item') ];

    var slides1Count = 0;
    var slides2Count = 0;

    function hideFirstSlide() {
    // slides[0] = first location of the array in the slides variable, slides[1] = second, etc.
    // slides[0][0] = first slide inside of the first array

        for (var iGal = 0, len = galleries.length; iGal < len; iGal++) {
        //console.log('number of galleries: ' + iGal);
            for (var jSlide = 0, len = slides.length; jSlide < len; jSlide++) {
            //console.log('number of slides within gallery: ' + slides[jSlide].length); // for debugging
            //console.log(slides[0][0]); // for debugging

                // We must loop over each slide when using querySelectorAll
                for (var kEachSlide = 0; kEachSlide < slides[jSlide].length; kEachSlide++) {
                //console.log(slides[jSlide].length); // Number of slides within current selected query

                    // Hide all slides within each slides array;
                    if (slides[0][kEachSlide]) {
                        slides[0][kEachSlide].classList.add('hide');
                    }
                    if (slides[1][kEachSlide]) {
                        slides[1][kEachSlide].classList.add('hide');
                    }

                    // Show first slide within each slides array
                    if (slides[0][0]) {
                        slides[0][0].classList.remove('hide');
                    }
                    if (slides[1][0]) {
                        slides[1][0].classList.remove('hide');
                    }
                }
            }
        }
    }

    window.onload = hideFirstSlide();

    for (var i = 0, len = gallery.length; i < len; i++) {
        // Add slider controls to each gallery
        gallery[i].insertAdjacentHTML('afterend', '<div class="slider-button-panel"><button class="slider-previous"></button><button class="slider-startshow">Start Slideshow</button><button class="slider-next"></button></div>');
        //console.log(gallery.length);
    }

    var sliderButtonPrevious = document.querySelectorAll('.single.slider .slider-previous');
    var sliderButtonNext = document.querySelectorAll('.single.slider .slider-next');

    var sliderNext = [  document.querySelector('.single.slider #gallery-1 + .slider-button-panel .slider-next'),
                        document.querySelector('.single.slider #gallery-2 + .slider-button-panel .slider-next') ];

    var sliderPrevious = [  document.querySelector('.single.slider #gallery-1 + .slider-button-panel .slider-previous'),
                                document.querySelector('.single.slider #gallery-2 + .slider-button-panel .slider-previous') ];

    // Show each subsequent slide one at a time by clicking the next and previous buttons
    // checking if each button exists on the page first
    if (sliderNext[0]) {
        sliderNext[0].addEventListener('click', showNext(slides[0], slides1Count));
    }
    if (sliderNext[1]) {
        sliderNext[1].addEventListener('click', showNext(slides[1], slides2Count));
    }

    if (sliderPrevious[0]) {
        sliderPrevious[0].addEventListener('click', showPrevious(slides[0], slides1Count));
    }
    if (sliderPrevious[1]) {
        sliderPrevious[1].addEventListener('click', showPrevious(slides[1], slides2Count));
    }

    // Next slide function
    function showNext(obj, counter) {
        return function() {
            obj[counter].classList.add('hide');
            counter++;
            if (counter === obj.length) {
                counter = obj.length - 1;
            }
            obj[counter].classList.remove('hide');
            //console.log(counter);
        }
    }

    // Previous slide function
    function showPrevious(obj, counter) {
        return function() {
            obj[counter].classList.add('hide');
            counter--;
            if (counter === -1) {
                counter = 0;
            }
            obj[counter].classList.remove('hide');
            console.log(counter);
        }
    }

)();

以下是相关的HTML和CSS：

<div id="gallery-1" class="gallery galleryid-555 gallery-columns-3 gallery-size-large">
    <figure class="gallery-item">
        <div class="gallery-icon landscape">
            <a href="#"><img src= ... /></a>
        </div>
        <figcaption class="wp-caption-text gallery-caption" ...>A Caption</figcaption>
    </figure>
    <figure class="gallery-item hide">
        <div class="gallery-icon landscape">
            <a href="#"><img src= ... /></a>
        </div>
    </figure>
    ...
    each slide thereafter has .hide class attached
</div>
<div id="gallery-2" class="gallery galleryid-555 gallery-columns-3 gallery-size-large">
    <figure class="gallery-item">
        <div class="gallery-icon landscape">
            <a href="#"><img src= ... /></a>
        </div>
    </figure>
    <figure class="gallery-item hide">
        <div class="gallery-icon landscape">
            <a href="#"><img src= ... /></a>
        </div>
    </figure>
    ...
</div>
...

---

.gallery-item {
    margin: 0 auto;
}

.single.slider .gallery {
    position: relative;
    min-width: 100%;
}

.single.slider .gallery-item {
    max-width: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.hide {
    display: none;
}

我也在这里的JSFiddle中包括一个精简版： https ://jsfiddle.net/jgpws/fkbrbkLa/。

谢谢。

Answer 1

好的，经过几个月的研究并阅读了一些教程和其他SO帖子之后，我终于找到了解决方案。

我将增加或减少幻灯片（隐藏和显示）的每个单独功能更改为只处理向上和向下计数的功能。 此函数返回向上或向下计数的两个对象。 然后，修改了单击处理程序以添加和删除hide类。 然后，在点击处理程序中，需要再次调用count函数。 该部分只能通过反复试验才能起作用。 因此，我只知道它有效，但不知道为什么。 也许它在隐藏/显示后重置了节点列表的位置？

另外，例如，当我单击前进然后立即单击后退时，我必须单击两次。 第二次单击，幻灯片将返回。

由于此解决方案已经足够接近我所寻找的内容，因此我可以接受。 这是更新的代码：

function() {

...

    var slides = [  document.querySelectorAll('.single.slider #gallery-1 .gallery-item'),
                document.querySelectorAll('.single.slider #gallery-2 .gallery-item') ];

    //var slides1Count = 0;
    //var slides2Count = 0;

    ...

    // Next slide function
    function showSlide(obj) {
        var counter = 0;
        return {
            showNext: function() {
                counter++;
                if (counter === obj.length) {
                    counter = obj.length - 1;
                }
                console.log('Next slide: ' + counter);
                return counter;
            },
            showPrevious: function() {
                counter--;
                if (counter < 0) {
                    counter = 0;
                }
                console.log('Previous slide: ' + counter);
                return counter;
            }
        }
    }

    // Show each subsequent slide one at a time by clicking the next and previous buttons
    // checking if each button exists on the page first
    function addClickEvents() {
        var currentSlide1 = showSlide(slides[0]);
        var currentSlide2 = showSlide(slides[1]);

        if (sliderNext[0]) {
            sliderNext[0].addEventListener('click', function() {
                slides[0][currentSlide1.showPrevious()].classList.add('hide');
                slides[0][currentSlide1.showNext()].classList.remove('hide');
                slides[0][currentSlide1.showNext()];
            });
        }
        if (sliderNext[1]) {
            sliderNext[1].addEventListener('click', function () {
                slides[1][currentSlide2.showPrevious()].classList.add('hide');
                slides[1][currentSlide2.showNext()].classList.remove('hide');
                slides[1][currentSlide2.showNext()];
            });
        }

        if (sliderPrevious[0]) {
            sliderPrevious[0].addEventListener('click', function() {
                slides[0][currentSlide1.showPrevious()].classList.remove('hide');
                slides[0][currentSlide1.showNext()].classList.add('hide');
                slides[0][currentSlide1.showPrevious()];
            });
        }
        if (sliderPrevious[1]) {
            sliderPrevious[1].addEventListener('click', function () {
                slides[1][currentSlide2.showPrevious()].classList.remove('hide');
                slides[1][currentSlide2.showNext()].classList.add('hide');
                slides[1][currentSlide2.showPrevious()];
            });
        }
    }
    window.onload = addClickEvents();

)();

可以更改某些函数名称以更好地描述它们的功能，但这对我有用。

文章《 轻松理解JavaScript闭包 》中的代码示例对我有很大帮助，因为对文章中某些代码的改编帮助我弄清楚了可以在每个按钮的click事件之间共享的计数器。