轮播图的实现其实就是一个个图片的透明度的调整，把要显示的图片透明度设为1，其他的都设为0，这里我用的是dom操作配合使用。
1：编写html的代码，把几个div和图片放进去：

2：编写css的样式：
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 610px;
height: 260px;
margin: 100px auto;
position: relative;
border: 3px solid #ccc;
}
li{
width: 100%;
height: 100%;
position: absolute;
text-align: center;
margin-top:5px ;
opacity: 0;
transition: 1s;
}
img{
width: 600px;
height: 250px;
}
li:first-child{
opacity: 1;
}
.btn{
width: 60px;
height: 30px;
background: rgba(0,0,0,0.5);
position: absolute;
color: #fff;
font-size: 35px;
text-align: center;
line-height: 30px;
margin-top: 130px;
margin-left: 5px;
cursor: pointer;
}
#next{
right: 5px;
}
.btn:hover{
background: rgba(0,0,0,0.9);
}
3：分步实现js的效果：
1：把各个id，标签找出来，并且设置图片的下标，和定时器
2：把时间定时器写出来，这个比较容易，
var stop=setInterval(show,2000);
3：show方法的编写：我们每次调用一次定时器时，它的下标就会往下走一个，所以index++; 之后再把所有图片的透明度设置为0；
并且把当前图片的透明度设置为1，如果下标为图片的长度时，让其等于0；具体实现如下：

4：然后设置鼠标放上和移开的停止和开始，就是停止时间器和开始

5：点击下一个和上一个的设置：上一个和自动播放几乎一样，点击事件按钮：定义下标减减，所有的设置为0，当前的设置为1，等于-1时，让其等于数组长度-1。

6;下一个的按钮事件：
同理：