用z-index来快速实现轮播图效果

做轮播图的方法有很多种，下面就是我自己想到的一种方法，比较简单。主要运用绝对定位和z-index来制作这种轮播图效果，当然要看懂下面代码必须得先搞懂z-index属性的作用，还有js中定时器setInterval的运用，这两个点没搞明白，直接在网上搜，非常的简单

下面是代码部分
先是css部分：
.back{
width: 800px;
height: 800px;
margin: auto;
}
.p1{
height: 300px;
width: 800px;
background-color: #f09a08;
position: absolute;
z-index: 0;
}
.stopAndStart{
position: absolute;
z-index: 3;
top:280px;
left: 40%;
}
.p2{
height: 300px;
width: 800px;
background-color: #9a9afb;
position: absolute;
z-index: 1;
}
.content{
height: 400px;
width: 800px;
background-color: #d9534f;
float: left;
margin-top: 400px;
}

js部分：

html部分：

然后是完成后的效果图：

当然上面的方法只是轮播两张图，如果要轮播多张图其实也还是一样的方法，运用z-index=1，2，在运用if，else来调整最上层的图片即可
下面就是一个轮播多张图的js部分代码：

上面这种方法只是我自己的方法
下面还有一种比较常用的轮播图制作方法：
https://www.jb51.net/article/146018.htm