遍歷所有圖像后，如何使我的javascript圖像庫重新開始？

Question

我正在為自己的網站制作自己的Wordpress插件，以查看我能做什么。 我在這里使用了代碼（ 制作一個簡單的javascript圖片庫 ）作為基礎，我希望它在所有設置的圖像中循環顯示，然后在用戶按下“下一步”按鈕時返回開始並循環播放所有圖像。 實現這一目標的最有效方法是什么？

我是JS的新手，所以我不知道該怎么做。 我已經搜索過Google，但沒有找到操作方法

var myImage= new Array(); 
myImage[0]="/wp-content/plugins/gallery/imgs/img1.png";       
myImage[1]="/wp-content/plugins/gallery/imgs/img2.png";
myImage[2]="/wp-content/plugins/gallery/imgs/img3.png";

var ImageCnt = 0;

function next(){
    ImageCnt++;
    document.getElementById("whiteBox").src = myImage[ImageCnt];
  }

如果您還需要插件的PHP文件（包含“ next”功能），請詢問，我將其發送

Answer 1

只需添加

if(ImageCnt >= myImage.length){
  ImageCnt = 0;
}

或者您可以通過以下方式使它更好

ImageCnt %= myImage.length;

這兩種方法將相同

如果您不了解第二種方法（ % ），請閱讀此文章https://www.digitalocean.com/community/tutorials/how-to-do-math-in-javascript-with-operators#modulo

 var myImage= new Array(); myImage[0]="https://placekitten.com/200/300"; myImage[1]="https://placekitten.com/g/200/300"; var ImageCnt = 0; function next(){ ImageCnt++; ImageCnt %= myImage.length //if(ImageCnt >= myImage.length){ // ImageCnt = 0; //} document.getElementById("whiteBox").src = myImage[ImageCnt]; } 

 #whiteBox{ width:100%; height:300px; } .next{ padding:10px; border:1px solid #000; display:inline-block; cursor:pointer; } 

 <img id="whiteBox" src="https://placekitten.com/200/300"> <div class="next" onclick="next()">next</div>