数组创建无限循环的轮播
1. 加载事件 防止刷新时第一张是空白板
如果没有这一段代码,一进来或者刷新,出现第一张相片都是空白板
代码如下:
<body>
//加载事件 ---- 防止刷新第一张是空白板
window.onload = function () {
changeImg1();//调用body相片的方法
}
2. 创建数组,在数组里存放五张相片
代码如下:
<script type="text/javascript">
var curIndex1 = 0; //相片的索引从0开始
var timeInterval1 = 3000;//时间间隔(单位毫秒),每隔3000毫秒进行下一张相片显示
//定义一个存放照片位置的数组,可以放任意个,在这里放4个
var arr = new Array();
arr[0] = "'~/../../Content/img/9619575ff09bcd62a0dc9545c9730879.jpg'";//第一张相片索引值为0
arr[1] = "'~/../../Content/img/c5fd1dea498565c64259503398bc5483.jpg'";//第二张相片索引值为1
arr[2] = "'~/../../Content/img/504caf822354abcc15c014e91d4ecaf3.jpeg'";//第三张相片索引值为2
arr[3] = "'~/../../Content/img/91db1d4921f9395174bd3e641b95d395.jpg'";//第四张相片索引值为3
arr[4] = "'~/../../Content/img/09833464b9b1218ee587ba86bfc0fe88.jpg'";//第五张相片索引值为4
//setInterval 创建一个定时器,参数是("调用函数",时间(单位毫秒)),执行这条语句的时候每隔设定的时间调用一次函数,通常用在定时弹出广告这方面。
setInterval(changeImg1, timeInterval1);
function changeImg1() {
if (curIndex1 == arr.length -1) {//相片索引值等于数组长度-1时,(4=5-1)相片就会从第一张开始显示
curIndex1 =0;//相片索引值就等于0
} else {
curIndex1 += 1;//否则相片的索引值加1,相片跳到下一张显示
}
//设置body的背景图片
document.body.style.backgroundImage = "URL("+arr[curIndex1]+")";//显示对应的图片
}
</script>
</body>