带有按钮导航的 JavaScript 单击图像

Question

网络开发新手，尝试创建一个通过单击“上一个”和“下一个”按钮循环浏览的图像库。有人知道怎么做这个吗？我认为我没有做任何正确的事情，但我将包括到目前为止我所做的事情。这个想法是使其适用于 n 不定数量的图像。

代码:

 <img src= "photos/1.jpg" id="currentImage"  height="288"/>
 <button id= "prev" onclick="prevImage()" class="portfolioNavigation">Previous</button>
 <button id= "next" onclick="nextImage()" class="portfolioNavigation">Next</button>
     <script type= "text/javascript">
   var counter = 2;
   var 1 = "photos/1.jpg";
   var 2 = "photos/2.jpg";
   var 3 = "photos/3.jpg";

prev.onclick = function(){
        document.getElementById("currentImage").src = counter - 1;
        counter--;
    }
next.onclick = function(){
        document.getElementById("currentImage").src = counter + 1;
        counter++;
    }

if(counter == 3){
        counter = 0;
    };
</script>

Answer 1

无需在按钮标签内使用“onclick”。

<script type= "text/javascript">
   var counter = 2;
   var sourceUrl = "photos/" + counter + ".jpg";
   var prev = document.getElementById("prev");
   var next = document.getElementById("next");

    prev.onclick = function(){
        counter--;
        document.getElementById("currentImage").src = sourceUrl;    
    }
    next.onclick = function(){
        counter++;
        document.getElementById("currentImage").src = sourceUrl;        }

    if(counter == 3){
        counter = 0;
    };
</script>