Javascript照片提前太多

Question

我想通過「上一個」和「下一個」鏈接/按鈕在數組中循環照片。我一直在我的網站上做得很好，html和css，但是JavaScript真的讓我感到厭煩。

我還在學習，如果任何人都可以幫忙，那會很棒。這個想法是能夠添加無限數量的照片到畫廊。我到目前爲止的代碼如下，但它似乎並沒有工作。我試圖獲得它，因此點擊最後一張圖片上的「下一張」按鈕會使我回到第一張圖片，並且第一張圖片上的「上一張」按鈕將帶我到最後一張。

var counter = 0; 
 
    var srcArray = ["photos/0.jpg", "photos/1.jpg", "photos/2.jpg"]; 
 
    
 
    prev.onclick = function() 
 
    { 
 
     document.getElementById("currentImage").src = srcArray[--counter]; 
 
    } 
 
    next.onclick = function() 
 
    { 
 
     document.getElementById("currentImage").src = srcArray[++counter]; 
 
    } 
 
    if(counter <= 0) 
 
    { 
 
     counter = 2; 
 
     document.getElementById("currentImage").src = "photos/2.jpg" 
 
    } 
 
    else if(counter >= 2) 
 
    { 
 
     counter = 0; 
 
     document.getElementById("currentImage").src = "photos/0.jpg" 
 
    }; 
 

<img src= "photos/0.jpg" id="currentImage" height="288"/> 
 
<p> 
 
    <button id= "prev" class="portfolioNavigation">Previous</button> 
 
    <button id= "next" class="portfolioNavigation">Next</button> 
 
</p> 
 

Answer 1

可以使用模運算符%保持算術簡單。

var index = 0; 
var photos = ["photos/0.jpg", "photos/1.jpg", "photos/2.jpg"] 
next.onclick = function() { 
    load_photo(1); 
} 
prev.onclick = function() { 
    load_photo(-1); 
} 
function load_photo(offset) { 
    index = (index + offset + photos.length) % photos.length; 
    document.getElementById("currentImage").src = photos[index]; 
} 

有一個額外的+ photos.length因爲%負數不會轉換爲正。如果index爲0和offset爲-1，您希望結果爲2。 (0 - 1 + 3) % 3給出2。