最近前端学习中遇到了网页中一个极为重要的组件，轮播图，并且尝试用代码做了两种类型的轮播图，其一层级轮播图，是纯html+css3，和少量js，其二，水平轮播图，这个也是最常见的轮播图，用到了js的部分知识，定时器什么的，主要用了jquery实现。
层级轮播图
1，首先制作轮播图的一般步骤是先搞一个div盒子装轮播图，div里面是一个无序列表，列表中的li就是一张张图片，接着和ul列表同级，并且是div的子元素，放两个按钮button，用来控制轮播图前后，html基本就是这样子滴。
首先轮播图嘛，就是会自己朝一个地方移动，用户鼠标放上去还要考虑轮播停止，用户点击按钮要能切换图片，最后要防止用户老爷们疯狂点击带来的bug，设置一个点击时间限制，让用户在三分之一秒之内只能点一次，这个时间段的其他点击全部忽略。
2，然后是css部分，层级轮播图的原理就是让li里面的图片开启绝对定位，让图片们浮动起来，重叠在一起，那么重叠在一起了怎么让它轮播呢？这主要是运用一个z-index属性设置图片的垂直优先级，这个值越大图片就在上层，就可以让你想要的图片浮现出来了，最好再设置一个transition为0.3s，透明度调一调，让浮现更加立体
3，js的部分主要是响应按钮点击事件，其实还有轮播图的自动轮播效果需要用到js的定时器，但是这里暂且不提，在下面的水平轮播图中我会细讲，这里主要是熟悉轮播原理。按钮点击事件就是给下一张图片增加一个active类，类里面设置他的z-index值让他浮现在最上层，并且最好设置一下透明度，让变化更加自然。就是简单的将图片的除了最上层的那张，其他图片初始设置为透明度0，就是完全透明，然后轮到下面的图片出现时，增加z-index属性，并且透明度为1，最好transition设置一下时间，让变化更自然。
水平轮播图
水平轮播图是市面上最常见的轮播图没有之一。所以这玩意挺重要，下面细细讲。
1，第一步，html代码和上面层级轮播图介绍的雷同。
<div id="first">
<a href="javascript:;" class="left" ><</a>
<a href="javascript:;" class="right" >></a>
<ul class="list">
<li class="">
<img src="0.jpg" alt="pic" class="loop"/>
</li>
<li class="">
<img src="1.jpg" alt="pic" class="loop"/>
</li>
<li class="">
<img src="2.jpg" alt="pic" class="loop"/>
</li>
<li class="">
<img src="3.jpg" alt="pic" class="loop"/>
</li>
</ul>
</div>
2，设置css代码，设置基本样式，消除一些默认样式
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a:link,a:visited,a:hover,a:active{
text-decoration: none;
}
（2.1） 设置loop类，就是图片的类，主要让图片适应大小
.loop{
padding: 0;
max-width: 100%;
}
（2.2）设置显示框，轮播图的显示口，超出它范围的都隐藏，别忘了开启定位，子绝父相
#first{
position: relative;
overflow: hidden;
height:352px;
width:1380px;
margin:0 auto;
background: black;
}
3，相当关键的一步，这里是水平轮播图的精髓，让li中的图片设置为inline-block，让图片在全部一层上，要做到这一点必须设置好它的父元素也就是ul的长度，我这里有4张图片，每张图片1380px，正常来说ul的宽应该是1380*4，可是这里设置成8280px，刚好多了两张图片，也就是ul中其实有6张图片，并且left设置为-1380px，就是从这六张图片的第二张开始播放。我这里先说好，本来是4张图片没错，可后来通过js将4张图片的最后一张复制了一下插到了第一个位置，将4张图片的第一张的复制插入到了最后面，如果原来图片的次序是1，2，3，4的话，接下来经过js处理，就变成了4，1，2，3，4，1，至于为什么这么做，就是后面的内容，这里先交代一下，主要是为了轮播切换效果更加合理。。
.list{
position:absolute;
top: 0;
left: -1380px;
width:8280px;
font-size: 0;
}
.list li{
width: 1380px;
display: inline-block;
}
4,设置按钮链接的样式
.left{
position: absolute;
left: 0;
top: 120px;
display: none;
z-index: 10;
border: 1px solid rgba(60,60,60,.8);
border-radius: 40px;
background: rgba(40,40,40,.8);
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
transition: 0.3s;
}
.right{
position: absolute;
right: 0;
top: 120px;
display: none;
z-index: 10;
border: 1px solid rgba(60,60,60,.8);
border-radius: 40px;
background: rgba(40,40,40,.8);
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
transition: 0.3s;
}
.right:hover,.left:hover{
color: rgba(255,255,255);
}
5，导入jquery文件，注意路径，写好jquery入口函数
<script src="../jquery/js/jquery1.1.3.js"></script>
<script>$(function(){});</script>
6，开始之前3步骤的添加结点代码
var l1 = $(".list li:first-child").clone();
var l2 = $(".list li:last-child").clone();
$(".list").append(l1);
$(".list").prepend(l2);
7，设置全局变量，代码实现鼠标进入显示按钮，鼠标离开，隐藏按钮。
var num = $(".list").children().length-1;
var pic_len = 1380;
var all_len = num*pic_len;
console.log("获得图片数量:"+(num+1)+"真实数量:"+(num-1));
$("#first").on({
mouseenter:function(){
$(".left").show();
$(".right").show();
},
mouseleave:function(){
$(".left").hide();
$(".right").hide();
}
});
8，设置定时器，自动轮播。这里也是整个代码的一个核心，之前提到过将1，2，3，4的图片顺序通过复制插入结点变为，4，1，2，3，4，1，这样子做的目的是，当轮播图到4时自动动画切换到1，到1时切换到第一个1，这时的切换是不通过动画的瞬间切换，用户无法感知，接下来1到2就可以重新用动画进行切换，这是到达最右端，到最左端的原理一样。
var left = -pic_len;
var flag = 0;
var tag = true;
var a = function(){
flag++;
left=left-pic_len;
if(left<-all_len){
left = -pic_len*1;
$(".list").css('left',left+'px');
console.log('H');
left-=pic_len;
}
if(left>0){
left = -pic_len*4;
$(".list").css('left',left+'px');
console.log('F');
left-=pic_len;
}
console.log('a:'+flag);
$(".list").animate({left:left+'px'},'0.8s');
}
go = setInterval(a,6000);
9，设置鼠标进入轮播停止，鼠标离开，轮播重新启动
$("#first").on({
mouseenter:function(){
console.log("鼠标进入");
clearInterval(go);
},
mouseleave:function(){
left = parseInt($(".list").css('left'));
console.log("鼠标离开");
console.log(left);
go = setInterval(a,6000);
}
});
10，最后设置按钮的逻辑代码，并且设置好400毫秒内只能点击一次
$(".left").on({
click:function(){
if(tag){
console.log("向左走"+left);
left+=pic_len;
if(left>0){
left = -pic_len*4;
$(".list").css('left',left+'px');
left+=pic_len;
}
$(".list").animate({left:left+'px'},'0.8s');
tag = false;
setTimeout(function(){
tag = true;
},400);
}
}
})
$(".right").on({
click:function(){
if(tag){
console.log("向右走"+left);
left-=pic_len;
if(left<-all_len){
left = -pic_len*1;
$(".list").css('left',left+'px');
left-=pic_len;
}
$(".list").animate({left:left+'px'},'0.8s');
tag = false;
setTimeout(function(){
tag = true;
},400);
}
}
})
总结：轮播图的实现方法多种多样，这只是其中之一。
