无限循环遍历数组（正序|倒序）先加后减原则

最新推荐文章于 2022-10-27 18:01:30 发布

Elephant_H

最新推荐文章于 2022-10-27 18:01:30 发布

阅读量1.2k

点赞数 2

分类专栏： javascript 文章标签：前端开发 javascript 遍历

本文链接：https://blog.youkuaiyun.com/Elephant_H/article/details/52996116

版权

javascript 专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = rollinit;
var rollimg = new Array("img/button1_on.jpg","img/button2_on.jpg","img/button3_on.jpg");
var i = 0;
var x = rollimg.length;
function rollinit(){
document.getElementById("rollit").src = rollimg[i];
document.getElementById("before").onclick = rollbefore;
document.getElementById("next").onclick = rollnext;
}
function rollbefore(){
if(i == 0){     //判断是否循环至数组第一个元素
i = x; 
}
i --;        //后减原则
document.getElementById("rollit").src = rollimg[i];
return false;
}
function rollnext(){
i++;        //先加原则
if(i == x){
i = 0;
}           //判断加1之后是否遍历至数组最后一个元素
document.getElementById("rollit").src = rollimg[i];
return false;
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<img src="" id="rollit" alt="image">
<div>
<a href="#" id="before">上一个</a>
<a href="#" id="next">下一个</a>
</div>
</body>
</html>