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

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

原创最新推荐文章于 2022-10-27 18:01:30 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发 #javascript #遍历

javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现图片轮播的方法。该方法通过定义一个数组存储图片路径，并利用前后按钮触发图片切换，实现了图片的循环播放效果。代码中包含了窗口加载事件监听、按钮点击事件处理等关键部分。

<!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>