Javascript图片库：为下一个和上一个按钮的循环不能正常工作

Question

我正在使用JavaScript构建图片库。

我有一个名为'图像'的文件夹中的所有图像，也有他们在一个数组中，所以我可以循环它们。

我有一个'下一步'按钮，其目的是显示下一个图像，'上一个'按钮来显示前一个图像。 但是，它只有一半的工作：当我点击下一个，它只显示数组中的第二个图像，并不会通过其他的，当我点击上一个，它只是向我显示一个空的图像。

这里是我的JS代码：

var images = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg', 'images/6.jpg', 'images/7.jpg', 'images/8.jpg', 'images/9.jpg']; 
var index = 0; 
document.getElementById('imgsrc').src = images[index]; 

var next = document.getElementById('slider-next'); 
var previous = document.getElementById('slider-previous'); 
//NEXT BUTTON 

next.addEventListener('click', nextImage); 

function nextImage(){ 
    for(i = 0; i < 10; i++){ 
     document.getElementById('imgsrc').src = images[index + 1]; 
    } 
} 
//'Previous' button 

previous.addEventListener('click', previousImage); 

function previousImage(){ 
    for(i = 0; i < 10; i++){ 
     document.getElementById('imgsrc').src = images[index - 1]; 
    } 
} 

这里是我的HTML：

<section class="button"> 

    <button id="slider-previous"><i class="fa fa-backward" aria-hidden="true" class="icon"></i></button> 

    <button id="slider-toggle"><i class="fa fa-play" aria-hidden="true" class="icon"></i></button> 

    <button id="slider-next"><i class="fa fa-forward" aria-hidden="true" class="icon"></i></button> 

    <button id="slider-random"><i class="fa fa-random" aria-hidden="true"></i></button> 

</section> 

<section class="gallery"> 

    <img id='imgsrc' src=""> 

</section> 

我到底错在这里做什么？

我感谢所有的反应

Answer 1

我不知道为什么你使用这些for循环。无论如何，用这段代码替换掉这些函数。

function nextImage() { 
    index+=1; 
    if (index > images.length - 1) { 
    index = 0; 
    } 

    document.getElementById('imgsrc').src = images[index]; 

} 
//'Previous' button 

previous.addEventListener('click', previousImage); 

function previousImage(){ 
    index-=1; 
    if (index < 0) { 
    index = images.length - 1; 
    } 

    document.getElementById('imgsrc').src = images[index]; 

} 

Answer 2

你叫NEXTIMAGE和减量调用previousImage时，当需要增加指标。另外，我添加了if语句以防止出现数组边界。

function nextImage() { 
    if(index < images.length - 1) { 
    for (i = 0; i < 10; i++) { 
     document.getElementById('imgsrc').src = images[index++]; 
    } 
    } 
} 

function previousImage() { 
    if(index > 0) { 
    for (i = 0; i < 10; i++) { 
     document.getElementById('imgsrc').src = images[index--]; 
    } 
    } 
} 

Answer 3

//NEXT BUTTON 

next.addEventListener('click', nextImage); 

function nextImage(){ 
    if(index<images.length-1) 
    { 
     index++; 
     document.getElementById('imgsrc').src = images[index]; 
    } 

} 
//'Previous' button 

previous.addEventListener('click', previousImage); 

function previousImage(){ 
    if(index>0) 
    { 
    index--; 
    document.getElementById('imgsrc').src = images[index]; 
    } 

}