基于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图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助。