Javascript 照片前进太多

Question

我正在尝试使用 "previous" 和 "next" links/buttons 循环浏览数组中的照片。我在我的网站上使用 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.

Javascript 照片前进太多

Javascript photos advance too far

html

javascript

css

onclick

gallery