javascript - 尝试使用下一个和上一个按钮循环回到开头的简单 javascript 画廊

Question

我对 javascript 相当陌生，但我基本上试图通过图库进行下一次/上一次点击。我设法找到了教程和位来获取图像以供点击。但是我似乎无法弄清楚如何在第四张(最后一张)图像之后返回到该系列的开头。

这就是我到目前为止所拥有的-

<script type="text/javascript">

 var photos=new Array()
 var which=0
 photos[0]='images/image1.jpg'
 photos[1]='images/image2.jpg'
 photos[2]='images/image3.jpg'
 photos[3]='images/image4.jpg'

 function backward(){
    if (which > 0){
        which=which-1
        document.images.photoslider.src=photos[which]
    }
 }

 function forward(){
     if (which<photos.length-1){
        which=which+1
        document.images.photoslider.src=photos[which]
     }
 }

 </script>

 <form>
     <input type="button" value="&lt;&lt;Back" onClick="backward()"> 
     <input type="button" value="Next&gt;&gt;" onClick="forward()">
 </form>

本质上，我希望按钮能够创建 4 个图像的连续循环。我知道会有一个简单的解决方案，我只是看不到它。任何帮助都会很棒!预先感谢您!

Answer 1

你可以这样做:

function backward() {
    if (which <= 0) {
        which = photos.length - 1;
    } else {
        which--;
    }
    document.images.photoslider.src=photos[which];
 }

 function forward(){
     which = (which + 1) % photos.length;               //  modulus keeps which within
     document.images.photoslider.src=photos[which];     // the bounds, while incrementing
 }

向后走，如果which小于或等于0，则跳转到最后一张照片。展望 future ，如果which + 1 == photos.length，模数会将其清零，循环回到开头。