<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}

div {
width: 665px;
height: 442px;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}

ul {
width: 665px;
height: 442px;
position: relative;
}

ul>li {
width: 665px;
height: 442px;
position: absolute;
left: 0;
top: 0;
display: none;
}

ul>li.active {
display: block;
}

ol {
width: 100px;
height: 14px;
position: absolute;
left: 50%;
margin-left: -50px;
bottom: 20px;
}

ol>li {
width: 14px;
height: 14px;
float: left;
margin: 0 3px;
border-radius: 50%;
background-color: #fff;
}

ol>li.active {
background-color: #f00;
}

a {
color: #eee;
width: 30px;
height: 60px;
font-size: 20px;
line-height: 60px;
text-align: center;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 191px;
}

a.prev {
left: 0;
}

a.next {
right: 0;
}

a:hover {
background-color: #000;
}
</style>

 

<div>
<ul>
<li class="active"><img src="img/1.jpeg" /></li>
<li><img src="img/2.jpeg" /></li>
<li><img src="img/3.jpeg" /></li>
<li><img src="img/4.jpeg" /></li>
<li><img src="img/5.jpeg" /></li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<a class="prev" href="javascript:;">&lt;</a>
<a class="next" href="javascript:;">&gt;</a>
</div>

<script type="text/javascript">
//因为鼠标移入我里面我需要停止动画 所以获取一下div
var div = document.getElementsByTagName("div")[0];
//获取按钮 图片 点点点
var prev = document.getElementsByClassName("prev")[0];
var next = document.getElementsByClassName("next")[0];

var ul_lis = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
var ol_lis = document.getElementsByTagName("ol")[0].getElementsByTagName("li");

var timer = null; //全局

var n = 0; //声明一个变量用来记录你当前是在第几张图
//下一个
next.onclick = function() {
loopBanner(1, ul_lis.length, 0)
}
//上一个
prev.onclick = function() {
loopBanner(-1, -1, ul_lis.length - 1)
}
//下面点点点
for(var i = 0; i < ol_lis.length; i++) {
//给每一个点点点定义一个自定义属性名为index
ol_lis[i].index = i;

ol_lis[i].onclick = function() {
for(var j = 0; j < ol_lis.length; j++) {
ol_lis[j].className = "";
ul_lis[j].className = "";
}
//点击哪个点点点 哪个点点点变色
this.className = "active";
//与点点点对应的图片显示
ul_lis[this.index].className = "active";
//让左右按钮和点点点进行关联
n = this.index;
}
}
//自动轮播
timer = setInterval(function() {
//下一个的代码
loopBanner(1, ul_lis.length, 0);
}, 1000)
//鼠标移入清除定时器
div.onmouseenter = function() {
clearInterval(timer);
}
//鼠标移出再度开启定时器
div.onmouseleave = function() {
timer = setInterval(function() {
//下一个的代码
loopBanner(1, ul_lis.length, 0);
}, 1000)
}

//把下一张和上一张封装成一个函数
function loopBanner(val, limit, target) {
n = n + val;
if(n === limit) {
n = target;
}
//先把所有的图片和点点点清空
for(var i = 0; i < ul_lis.length; i++) {
ul_lis[i].className = "";
ol_lis[i].className = "";
}
ul_lis[n].className = "active";
ol_lis[n].className = "active";
}
</script>