滑塊-上一個按鈕隱藏第一張幻燈片，而不是上一張幻燈片

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事件之間共享的計數器。