前端重要组件--轮播图的详细教程（层级轮播图和水平轮播图）（极其详细，建议收藏）

最近前端学习中遇到了网页中一个极为重要的组件，轮播图，并且尝试用代码做了两种类型的轮播图，其一层级轮播图，是纯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" >&lt;</a>
			<a href="javascript:;" class="right" >&gt;</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);
			            }
			        }
			    })

总结：轮播图的实现方法多种多样，这只是其中之一。