Question

我正在为自己的网站制作自己的Wordpress插件，以查看我能做什么。我在这里使用了代码（Making a simple javascript Image gallery），并希望它循环浏览所有设置的图像，然后在用户按下“下一个”按钮时返回开始并循环播放所有图像。实现这一目标的最有效方法是什么？

我是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>

遍历所有图像后，如何使我的javascript图像库重新开始？

1 个答案: