轮播图（2）——基于JQ的左右滑动轮播

上回书我们说到原生js淡入淡出效果的轮播图，这回我们说说左右滑动轮播图，由于需要缓动动画效果，原生js需要封装缓动函数，个人觉得不如JQ来的实在，所以本渣渣直接引入JQ，用JQ相对简单，重要的是思想。

1、思路

老规矩先来个大致思路，有个好的战略计划才能获取战斗的成功

1.1 css样式布局

有好的布局才能进行js的操控，css大致布局如下图

由上图简单的介绍一下布局
红色的是最外层容器，固定宽高，老规矩相对定位，还有就是一定要有溢出隐藏（overflow:hidden）；ul根据图片的多少宽度相对倍数改变，，同样ul是绝对定位，js就是改变ul的绝对定位的left值控制显示第几张的图片；焦点图的布局和轮播图（1）一样的方法，不知道的去瞅瞅；左右按钮就的容器也是绝对定位，用margin-top或者top值控制距离上部的距离，宽度也是100%；然后各自向左右浮动，margin值控制按钮相距最外层左右的距离；

1.2 js的大致思路

js同样要实现动态创建和图片相同个数的焦点图，计时器控制ul的left值，从而动态显示最外层里所显示的图片，加上溢出隐藏，就成了动态轮播图

2、开搞

2.1 html代码

<div class="banner" id="banner">
    <ul>
        <li><a href="#">[站外图片上传中……(2)]</a></li>
        <li><a href="#">[站外图片上传中……(3)]</a></li>
        <li><a href="#">[站外图片上传中……(4)]</a></li>
        <li><a href="#">[站外图片上传中……(5)]</a></li>
        <li><a href="#">[站外图片上传中……(6)]</a></li>
        <li><a href="#">[站外图片上传中……(7)]</a></li>
        <li><a href="#">[站外图片上传中……(8)]</a></li>
    </ul>
    <span class="order">
            <!-- <i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i> -->   
    </span>
    <div class="ctrl">
        <button title="上一张" class="prev"><</button>
        <button title="下一张" class="next">></button>
    </div>
</div>

2.2 css代码

*{padding:0;margin:0;list-style: none;}
    .banner{
        width:500px;
        height:312px;
        overflow: hidden;
        margin:0 auto;
        position:relative;
    }
    .banner>ul{
        height:312px;
        width:3500px;
        position: absolute;
        left:0;
        top:0;
    }
    .banner>ul li{
        float:left; 
        width:500px;
    }
    .order{
        display: block;
        height:30px;
        width:100%;
        position: absolute;
        top:90%;
        left:0;
        text-align: center;
    }
    .order i{
        display:inline-block;
        width:16px;
        height:16px;
        border-radius: 50%;
        background:chocolate;
        border:2px solid chocolate;
        margin-right:10px;
        cursor:pointer;
    }
    .order i:last-child{
        margin-right: 0;
    }
    .order .on{
        background:white;
    }
    .ctrl{
        width:100%;
        height:60px;
        position: absolute;
        top:120px;
        left:0;
    }
    .ctrl button{
        width:40px;
        height:60px;
        background: #ccc;
        color:#FFF;
        border:0;
        outline:none;
        opacity: 0.5;
        font-size: 30px;
        cursor:pointer;
    }
    .ctrl .prev{
        float:left;
        margin-left:10px;
    }
    .ctrl .next{
        float:right;
        margin-right:10px;
    }

2.3 js代码

    $(function(){
        //创建控制小圆点
        var imgLis = $('#banner>ul li');
        console.log(imgLis.length);
        for(i=0;i<imgLis.length;i++){
            $('<i order='+i+'></i>').appendTo('.order');
        }
        //在第一个小圆点添加类名“on”
        $('.order i').eq(0).addClass('on');

        //将放置图片的容器ul里第一份”li“复制一份，追加到ul后面
        imgLis.first().clone().appendTo('#banner ul');
        console.log(imgLis.length);
        $('#banner>ul').width($('#banner ul li').width()*(imgLis.length+1));

        var num = 0;
        var timer = null;
        //状态预设，是为防止用户连续点击左右按钮，导致短时间内图片切换频率过高而犯神经，程序反应不来
        var state = true;
        function play(){

            //从左向右时，判断num，是否大于最大值
            if(num < 0){
                num = imgLis.length-1;
                $('#banner>ul').css({left:-imgLis.length*500+'px'});
            }
            //从右向左时，判断num，是否大于最大值
            if(num > imgLis.length){
                num = 1;
                $('#banner>ul').css({left:'0'});
            }
            var left = num*500;
            $('#banner>ul').animate({left:-left+'px'},function(){
                state = true;
            });
            //焦点
            $('.order i').removeClass('on');
            $('.order i').eq(num).addClass('on');
            if(num >= imgLis.length){
                $('.order i').first().addClass('on');
            }
            
        }
        
        //自动播放
        function autoPlay(){
                timer = setInterval(function(){
                num++;
                play();
                
            },1000);
        }
        //添加鼠标移入暂停，移出继续事件
        $('#banner').mouseover(
            function(){
                clearInterval(timer);
                timer = null;
            }
        ).mouseout(
            function(){
                autoPlay();
            }
        );
        //给左右按钮添加点击事件
        $('.prev').click(function(){
            if(state == true){
                state = false;
                num--;
                console.log(num);
                play();                 
            }

        });
        $('.next').click(function(){
            if(state == true){
                state = false;
                num++;
                play();
            }
        });
        //给焦点添加点击事件
        $('.order i').click(function(){
            num = $(this).index()
            play();
        });
        autoPlay();
    });

3、注意

记得要引入jq，否则无法运行
这个轮播图虽然可用，但是有个很大的弊病，就是点击焦点时，所点击的焦点的索引与此时所显示图片的索引相差的有1或者大于1时会跳跃式快速滑动到相对应所点击的焦点索引的图片，对于用户来说体验不太好，所以这个轮播图适合没有焦点图，需要使用此轮播图的童鞋，为了体验，最好删除掉焦点图部分相关代码。
下一篇会有一个专门应对焦点图点击有良好体验的轮播图类型，敬请期待！

4、在线演示

在线演示