滑动的轮播图，纯jquery书写，注释清晰可读！

一提到轮播图，相信大家都不陌生。这个轮播图无非就两种形式。

第一种通过切换的方式去更换图片，这种方式往往是采取的是更换路径！

第二种就是通过滑动的方式去更换图片，而这种就是通过改变left值或者是margin-left值。

今天想和大家分享的是第二种方式！

1.首先我还是将结构搭建起来，html结构其实是非常简单的。

 <!-- 内容 -->
    <div class="container">
        <ul>
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
        </ul>
        <!-- 左右按钮 -->
        <button class="btn1">&lt;</button>
        <button class="btn2">&gt;</button>
        <!-- 轮播图下面的小圆点 -->
        <div class="points">
            <div class="color">1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>

2.大家记住要引入jquery哦！这里我使用的是1.11.3版本，因为这个版本比较经典，且兼容性更好一点。接下来给大家展示我的js代码。

 <script>
        // 定义一个定时器
        var timer = null;
        // 定义li的宽度
        var liWidth = $('ul').find('li').eq(1).innerWidth();
        // console.log(liWidth);
        // 定义一个变量n
        var n = 0;
        // 开启一个定时器 不断调用函数
        timer = setInterval(function () {
            run();
        }, 1500);
        // 封装一个函数
        function run() {
            // 这里我们使用动画队列
            $('ul').animate({
                left: -liWidth
            }, function () {
                // 我们将ul归位，且将第一个li放到最后
                $(this).css('left', 0).find('li:first').appendTo(this);
                // 这里可以让小圆点跟着图片滑动
                n++;
                // 如果小圆点超过最后一个，就返到第一个
                if (n > 4) {
                    n = 0;
                }
                // 给小圆点添加样式
                $('.points div').eq(n).addClass('color').siblings().removeClass('color');
            })
        }
        // 当鼠标移动到指定区域就暂停动画
        //离开后就开始动画
        $('.container').hover(function () {
            clearInterval(timer);
        }, function () {
            timer = setInterval(function () {
                run();
            }, 1500)
        })
        // 左右按钮
        $('.btn2').click(function () {
            run();
        })
        $('.btn1').click(function () {
            // 将ul归位并且将最有一个li放到最前面
            $('ul').css('left', -liWidth).find('li:last').prependTo($('ul'));
            $('ul').animate({
                left: 0
            })
            // 操作小圆点
            n--;
            if (n < 0) {
                n = 4;
            }
            $('.points div').eq(n).addClass('color').siblings().removeClass('color');
        })
        // 最后我们点击小圆点,切换对应图片
        //这里我们需要用到循环遍历，给小圆点绑定事件
        $('.points div').each(function (index) {
            // 这里绑定下事件
            $(this).click(function () {
                // 判断index索引值和n的大小
                if (n < index) {
                    for (var i = n; i < index; i++) {
                        $('ul').animate({
                            left: -liWidth
                        }, 100, function () {
                            $(this).css('left', 0).find('li:first').appendTo(this);
                        })
                    }
                } else if (n > index) {
                    for (var i = n; i > index; i--) {
                        $('ul').css('left', -liWidth).find('li:last').prependTo($('ul'));
                        $('ul').animate({
                            left: 0
                        }, 100);
                    }

                }
                n = index;
                $('.points div').eq(n).addClass('color').siblings().removeClass('color');
            })

        })
    </script>

3.另外样式的话，其实很简单。就是有一点需要注意就是中间的长盒子里面装的图片然后浮动起来，超出部分隐藏。

.container {
    width: 600px;
    height: 400px;
    /* background-color: aqua; */
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}

ul {
    list-style: none;
    height: 400px;
    width: 3000px;
    position: absolute;
    left: 0;
    top: 0;
    /* background-color: aquamarine; */
    padding: 0;
    margin: 0;
}
ul li {
    width: 600px;
    height: 400px;
    float: left;
}
ul>li img{
    width: 600px;
    height: 400px;
}
.btn1 {
    width: 40px;
    height: 35px;
    /* background-color: rgba(3, 3, 3, 0.459); */
    background-color: transparent;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border: 0;
    font-size: 28px;
    border-radius: 0 16px 16px 0;
    color: #fff;
}
.btn1:hover{
    cursor: pointer;
    background-color: aqua;
}
.btn2{
    border-radius:  16px  0 0 16px ;
    border: 0;
    width: 40px;
    height: 35px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    /* background-color: rgba(3, 3, 3, 0.459); */
    margin: auto;
    font-size: 28px;
    color: #fff;
    background-color: transparent;

}
.btn2:hover{
    cursor: pointer;
    background-color: aqua;
}
/* 小圆点 */
.points{
    width: 140px;
    height: 25px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 5px;
    border-radius: 18px;
}
.points div{
    font-size: 5px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    float: left;
    margin: 7px 6px;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(3, 3, 3, 0.459);
}
.points .color{
    background-color: red;
}
.points div:hover{
    cursor: pointer;
}