在纯javascript中对数组进行递增和循环时出现问题

Question

我构建了一个javascript库(没有库)作为演示幻灯片的图像。上一页/下一页按钮应该循环遍历数组，而不管它的大小。期望bevavior下一个按钮:1,2,3,4,5,0,1,2…按钮:5、4、3、2、1、0、5、4…

问题

1. 改变计数并不总是改变图像
2. "previous"按钮递减先上升，并显示-1
3. 我必须调用' next ';按钮功能onload，否则需要两次点击启动图像更改。我更喜欢通过html或初始函数预加载图像0的画廊。

请查看https://codepen.io/cnote/pen/gOKdpxr谢谢你

我尝试从加载images[0]开始，但这需要2次初始单击按钮才能工作。我试过重新设计函数中的逻辑，但我不擅长这个。

var currentImage = 0;
var images = [];
images[0] = "https://chrismichaelides.com/img/test0.jpg";
images[1] = "https://chrismichaelides.com/img/test1.jpg";
images[2] = "https://chrismichaelides.com/img/test2.jpg";
images[3] = "https://chrismichaelides.com/img/test3.jpg";
images[4] = "https://chrismichaelides.com/img/test4.jpg";
function nextImage() {
document.getElementById("deckImage").src = images[currentImage++];
document.getElementById("deckNumber").innerHTML = currentImage + " of " + images.length;
console.log("slide = " + currentImage);
//start over
if (currentImage >= images.length) {
currentImage = 0;
console.log("slide = " + currentImage);
}
}
function prevImage() {
document.getElementById("deckImage").src = images[currentImage--];
document.getElementById("deckNumber").innerHTML = currentImage + " of " + images.length;
console.log("slide = " + currentImage);
//cycle backwards to last from first
if (currentImage < 0) {
currentImage = images.length - 1;
console.log("slide = " + currentImage);
}
}

Answer 1

我很乐意帮助你。

老实说，我不知道代码中的问题是什么，但我有一个解决方案，我认为会适合你。

我把函数改成如下:

function nextImage() {
currentImage = (currentImage + 1 + images.length) % images.length;
document.getElementById("deckImage").src = images[currentImage];
document.getElementById("deckNumber").innerHTML =
(currentImage + 1) + " of " + images.length;
console.log("slide = " + currentImage);
}
function prevImage() {
currentImage = (currentImage - 1 + images.length) % images.length;

document.getElementById("deckImage").src = images[currentImage];
document.getElementById("deckNumber").innerHTML =
(currentImage + 1) + " of " + images.length;
console.log("slide = " + currentImage);
}

甚至可以写成:

function nextImage() {
cycle(1);
}
function prevImage() {
cycle(-1);
}
function cycle(direction) {
currentImage = (currentImage + direction + images.length) % images.length;

document.getElementById("deckImage").src = images[currentImage];
document.getElementById("deckNumber").innerHTML =
(currentImage + 1) + " of " + images.length;
console.log("slide = " + currentImage);
}

我希望这个解决方案能被您接受。

如果您还有其他问题，或者这个解决方案不适合您，请描述您的情况，以便我建议更好的解决方案。

问好PS:我是新来的-如果我做错了什么，请指出我

Answer 2

我已经修改了你的代码相当多，但我一直试图保持你的逻辑尽可能多。而不是使用图像数组，然后数组。长度，我已经将3硬编码为代表4个图像(0,1,2和3)的代码。

// You have 4 images: 0, 1, 2 and 3
var currentImage = 0;
function nextImage() {
currentImage++;
//start over
if (currentImage >= 4) {
currentImage = 0;
}
console.log("slide = " + currentImage);
}
function prevImage() {
currentImage--;
//cycle backwards to last from first
if (currentImage < 0) {
currentImage = 3;
}
console.log("slide = " + currentImage);
}
const prev = document.querySelector('#prev');
const next = document.querySelector('#next');
console.log("slide = " + currentImage);
prev.addEventListener('click', function(){
prevImage();
});
next.addEventListener('click', function(){
nextImage();
});

<button id='prev'>Prev</button>
<button id='next'>Next</button>