<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="public.css"/>
<style type="text/css">
a{display: block;position: relative;height: 320;width: 810px;}
ul{position: absolute;bottom: 20px;left: 50%;margin-left: -76px;}
li{height:30px;width: 30px;border:3px solid #666;border-radius: 50%;float: left;margin:5px;cursor: pointer;}
.te{background: rgba(255,255,255,.5);}
</style>
</head>
<body>
<a>
<img src="img/001.jpg"/>
<ul>
<li class="te"></li>
<li></li>
<li></li>
<li></li>
</ul>
</a>
<script type="text/javascript">
var aLi = document.getElementsByTagName("li");
var aImg = document.getElementsByTagName("img")[0];
function jishi(){
i++;
for(var j=0;j<aLi.length;j++){
aLi[j].className = "";
}
aLi[i].className = "te";//通过classname改变li样式
aImg.src = "img/00"+(i+1)+".jpg";
if(i==3){
i=-1;
}
}
var i=0;
var timer = setInterval(jishi,1000);
function dianji(a){//将函数封装避免由于定时器异步执行产生bug
aLi[a].onclick = function(){
clearInterval(timer);
for(var j=0;j<aLi.length;j++){
aLi[j].className = "";
}
aLi[a].className = "te";
aImg.src = "img/00"+(a+1)+".jpg";
i=a;//这里给定时器中的i赋一个初值
timer=setInterval(jishi,1000);//添加定时器之前要清楚定时器
}
}
for(var b=0;b<aLi.length;b++){
dianji(b);//给每一个li添加点击事件
}
</script>
</body>
</html>
基本轮播图应该怎么写
于 2017-04-18 20:03:45 首次发布