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

我创建了一些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 arrayfor (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="http://www.srcmini.com/#"> < img src= http://www.srcmini.com/... /> < /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="http://www.srcmini.com/#"> < img src= http://www.srcmini.com/... /> < /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="http://www.srcmini.com/#"> < img src= http://www.srcmini.com/... /> < /a> < /div> < /figure> < figure class="gallery-item hide"> < div class="gallery-icon landscape"> < a href="http://www.srcmini.com/#"> < img src= http://www.srcmini.com/... /> < /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/。
谢谢。
#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事件之间共享的计数器。