图片轮播的小案例
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片轮播的小案例相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
div{
width:700px;
margin:0 auto;
position:relative;
}
ul{
position:absolute;
bottom:0px;
left:220px;
}
li{
width:15px;
height:15px;
background: darkgray;
border-radius:15px;
float:left;
list-style: none;
margin-right:20px;
}
</style>
</head>
<body >
<script>
//声明一个变量，
var count=1;
window.onload=function(){
setInterval("changepic()",3000);
}
function changepic(){
//获得li标签这个数组
var liarr=document.getElementsByTagName("li");
res=document.getElementById("pic");
if(count==6){
count=1;
}
//所有背景颜色为hui色
for(i=0;i<liarr.length;i++){
liarr[i].style.background="darkgray";
}
//设置当前图片对应的li标签背景颜色改变
liarr[count-1].style.background="cornflowerblue";
//设置图片的路径随count值进行改变
res.src="img/10"+count+".jpg";
count++;
}
</script>
<div>
<img src="img/101.jpg" id="pic" />
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
以上是关于图片轮播的小案例的主要内容，如果未能解决你的问题，请参考以下文章