<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li { list-style:none; padding:0;margin:0;}
#div1{width:100%;position:relative;}
#div2{display:none;}
#div1 img{width:100%;display:block;}
#div1 ul{width:80px;height:20px;padding:0;position:absolute;bottom:30px;left:50%;}
#div1 ul li{width:11px;height:11px;display:block;background:#555;border-radius:50%;float:left;transition:all 0.5s;margin-left:10px;}
#div1 ul .active{background:#18ADAA;width:22px;border-radius:30%;}
</style>
</head>
<body>
<div id='div2'>
<img src='img/hj1.jpg'/>
<img src='img/hj2.jpg'/>
<img src='img/hj3.jpg'/>
<img src='img/hj4.jpg'/>
</div>
<div id="div1">
<img src=''/>
<ul></ul>
</div>
<script>
var div2=document.getElementById('div2');
var img2=div2.getElementsByTagName('img');
var div=document.getElementById('div1');
var img=div.getElementsByTagName('img')[0];
var ul=div.getElementsByTagName('ul')[0];
var li=ul.getElementsByTagName('li');
var num=0;
var timer=null;
var arrUrl=[];
//插入图片
for(var i=0;i<img2.length;i++){
arrUrl[i]=img2[i].src;
}
//设置定时器
function autoPlay(){//多少秒后执行
clearInterval(timer);
timer=setInterval(function(){//定时器
num++;
num%=arrUrl.length;//取余数，也可以用if判断控制范围
fnTab();
},3000);
}
setTimeout(autoPlay,6000);
div.onmouseover=function(){
clearInterval(timer);
}
div.onmouseout=autoPlay;
//添加li
for(var i=0;i<arrUrl.length;i++){
ul.innerHTML+='<li></li>';
}
//初始化
function fnTab(){
img.src=arrUrl[num];//给img添加src
for(var i=0;i<arrUrl.length;i++){
li[i].className='';
}
li[num].className='active';
}
fnTab();//调用函数
//li和图片切换的关联，
for(var i=0;i<li.length;i++){
li[i].index=i;
li[i].onmouseover=function(){
num=this.index;//赋值num
fnTab();
}
}
</script>
</body>
</html>这个轮播图没有设置左右移动的按钮，图片和下面的点都是用js添加的
