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]; 
    } 

}