我创建了一些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/
感谢。
答案 0 :(得分：0)
好吧，经过几个月的讨论并阅读了几篇教程和其他SO帖子后，我终于找到了似乎是一个解决方案。
我将每个增加或减少幻灯片（隐藏和显示）的单独函数更改为一个只处理向上和向下计数的函数。此函数返回两个向上或向下计数的对象。然后，修改了点击处理程序以添加和删除隐藏类。然后，在单击处理程序中，需要再次调用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();
)();
可以更改某些功能名称以更好地描述它们的功能，但这对我有用。
文章Understand JavaScript Closures With Ease中的代码示例对我帮助很大，因为正在调整一些文章的代码，帮助我找出一个可以在每个按钮之间共享的计数器＆＃ 39;点击事件。