滑块-前一个按钮隐藏第一个幻灯片而不是前一个幻灯片。

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

好吧，经过几个月的摆弄和阅读了几篇教程和其他相关文章之后，我终于找到了一个解决方案。

我将每个增加或减少幻灯片(隐藏和显示)的独立函数更改为一个只处理向上和向下计数的函数。此函数返回两个向上或向下计数的对象。然后，修改单击处理程序以添加和删除隐藏类。然后，在单击处理程序中，需要再次调用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闭包中找到的代码示例对我有很大帮助，因为本文的一些代码的改编帮助我找到了一个计数器，可以在每个按钮的单击事件之间共享。