Как мне заставить мою галерею изображений 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;

Эти 2 метода будут работать одинаково

Если вы не понимаетеВторой метод (%), пожалуйста, прочитайте эту статью 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>