首先我们先来弄清楚思路：
第一步：我们想让图片动起来（此时需要一个计时器来控制每隔多少秒切换图片），我们要思考通过什么方式来切换图片，无非就是每隔一段时间图片的地址发生了变化
第二步：此时我们需要将按钮与图片绑定起来
第三步：我们需要给图片添加鼠标移入和移出的事件。
下面我们来书写代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>轮播</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.slider{
height: 454px;
730px;
position: relative;
}
ul{
overflow: hidden;
position: absolute;
top: 400px;
left: 250px;
}
li{
30px;
height: 30px;
float: left;
border-radius: 30px;
text-align: center;
line-height: 30px;
vertical-align: middle;
list-style: none;
border: 1px solid red;
margin-right: 10px;
}
.changeBtn{
background-color: red;
}
</style>
</head>
<body>
<div class="slider">
<img src="../images/1.jpg" alt="" id="sliderImg"/>
<ul>
<li class="changeBtn">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
var imgArray=["../images/1.jpg","../images/2.jpg","../images/3.jpg","../images/4.jpg"];
var btn=document.getElementsByTagName("li");
var sliderImg=document.getElementById("sliderImg");
var imgIndex=0;
var timer;
var btnIndex=0；
//让图片动起来，并将按钮与图片绑定
timer=window.setInterval(function(){
imgIndex++;
if(imgIndex<imgArray.length){
sliderImg.src=imgArray[imgIndex];
}else{
imgIndex=0;
sliderImg.src=imgArray[imgIndex];
}
for(var i= 0;i<btn.length;i++){
if(i==imgIndex){
btn[i].className="changeBtn";
}else{
btn[i].className="";
}
}
},1500);
//给按钮绑定鼠标移入、移出的事件，主要此时需要用到立即执行函数，不然的话当函数开始执行时此时j已经变成了4，从而无法访问到按钮。
for(var j=0;j<btn.length;j++ ){
!function(j){
btn[j].onmouseover=function(){
window.clearInterval(timer);
sliderImg.src=imgArray[j];
for(var b= 0;b<btn.length;b++){
if(b==j){
btn[b].className="changeBtn";
}else{
btn[b].className="";
}
}
};
btn[j].onmouseout=function(){
imgIndex=j;
timer=window.setInterval(function(){
imgIndex++;
if(imgIndex<imgArray.length){
sliderImg.src=imgArray[imgIndex];
}else{
imgIndex=0;
sliderImg.src=imgArray[imgIndex];
}
for(var i= 0;i<btn.length;i++){
if(i==imgIndex){
btn[i].className="changeBtn";
}else{
btn[i].className="";
}
}
},1500);
}
}(j)；
}
</script>
</body>
</html>