我正在为我自己的网站制作自己的Wordpress插件,看看我能做些什么。我使用了这里的代码(Making a simple javascript Image gallery)作为它的基础,我希望它在所有设置的图像之间循环,然后返回开始并在用户按下“下一步”按钮时循环所有图像。实现这一目标的最有效方法是什么?
我是JS的新手,所以我不知道该怎么做。我已经在谷歌上搜索过了,没有找到该怎么做
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文件插件以及(包含‘下一步’功能)只需询问,我会发送它
发布于 2019-04-15 03:05:34
只需添加
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>
https://stackoverflow.com/questions/55678809
复制相似问题