创建上一个按钮和重置

Question

你好，我有这个数组中的图像库。我还有一个按钮，点击后会转到下一个图像。我试着重新创建一个转到前一个图像的按钮，但当点击时，什么也没发生。

问题：上一个按钮不起作用，在进入最终图片时按下下一个按钮时无法重置回图像1。

var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = './images/andrea_highres.jpg';
imgArray[1] = new Image();
imgArray[1].src = './images/lizbeth_highres.jpg';
imgArray[2] = new Image();
imgArray[2].src = './images/lizzy_highres.jpg';
imgArray[3] = new Image();
imgArray[3].src = './images/nick_highres.jpg';
function nextImage(element) {
var img = document.getElementById(element);
for(var i = 0; i < imgArray.length; i++) {
if(imgArray[i].src == img.src) {
if(i === imgArray.length) {
document.getElementById(element).src = imgArray[0].src;
break;
}
document.getElementById(element).src = imgArray[i+1].src;
break;
}
}
}
function prevImage(element) {
var img = document.getElementById(element);
for(var i = 0; i > imgArray.length; i++) {
if(imgArray[i].src == img.src) {
if(i === imgArray.length) {
document.getElementById(element).src = imgArray[0].src;
break;
}
document.getElementById(element).src = imgArray[i-1].src;
break;
}
}
}

Answer 1

这个代码应该是可以的。。(？(

const imgRefs  = ['andrea', 'lizbeth', 'lizzy', 'nick']
,   imgArray = imgRefs.map( img =>  
{
let img = new Image()
img.src = `./images/${img}_highres.jpg`
return img  
})
,   imageElement = document.getElementById('image_ID')  // make it as a const !
;
function changeImg( direction )
{
let newIndex = imgRefs.findIndex(x=>imageElement.src.includes(x) ) + direction
if (newIndex < 0)               newIndex = 0
if (newIndex >= imgRefs.length) newIndex = imgRefs.length -1
imageElement.src = imgArray[newIndex].src
}
function nextImage()
{
changeImg(+1)
}
function prevImage()
{
changeImg(-1)
}

Answer 2

试用

const imgArray = ['andrea', 'lizbeth', 'lizzy', 'nick'].map(img=>
{
let img = new Image()
img.src = `./images/${img}_highres.jpg`
return img  
})
function nextImage(element) {
changePicture(element, 1)
}
function prevImage(element) {
changePicture(element, -1)
}
function changePicture(element, count){
var img = document.getElementById(element),
index = imgArray.findIndex(el => el.src == img.src);
if(index + count <= -1) { 
img.src = imgArray[imgArray.length-1].src;
}else if(index + count >= imgArray.length){ // You will never reach the length. The length value is last pos index + 1 (if we have 4 element, last index will be 3 but length woill be 4)
img.src = imgArray[0].src;
}else{
img.src = imgArray[i + count].src;
}
}