我如何使我的javascript图片库在浏览完所有图像后返回到开始位置？
我如何使我的javascript图片库在浏览完所有图像后返回到开始位置？
提问于 2019-04-15 02:48:13
我正在为我自己的网站制作自己的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文件插件以及(包含‘下一步’功能)只需询问，我会发送它
回答 1
Stack Overflow用户
回答已采纳
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55678809
复制相关文章
相似问题