基于javascript数组实现图片轮播
图片轮播的办法有多种，在这里介绍一种简单的：js数组实现。
首先将图片路径存储在数组中，然后再调用setInterval函数来依次轮播图片
<scripttype="text/javascript">
varcurIndex=0;
vartimeInterval=1000;
vararr=newArray();
arr[0]="1.png";
arr[1]="2.png";
arr[2]="3.png";
arr[3]="4.png";
arr[4]="5.png";
setInterval(changeImg,timeInterval);
functionchangeImg(){
varobj=document.getElementById("imge");
if(curIndex==arr.length-1){
curIndex=0;
}else{
curIndex+=1;
}
obj.src=arr[curIndex];
}
</script>
完整实例如下
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>使用数组实现图片自动轮播</title>
<styletype="text/css">
#main{
width:700px;
height:450px;
margin:0auto;
text-align:center;
}
</style>
<scripttype="text/javascript">
varcurIndex=0;
vartimeInterval=1000;
vararr=newArray();
arr[0]="1.png";
arr[1]="2.png";
arr[2]="3.png";
arr[3]="4.png";
arr[4]="5.png";
setInterval(changeImg,timeInterval);
functionchangeImg(){
varobj=document.getElementById("imge");
if(curIndex==arr.length-1){
curIndex=0;
}else{
curIndex+=1;
}
obj.src=arr[curIndex];
}
</script>
</head>
<body>
<divid="main">
<h1>使用数组实现图片自动轮播</h1>
<imgid="imge"src="1.png"alt="picture"/>
</div>
</body>
</html>
精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助。
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短