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。