DOM手写轮播图

说明：转载需注明出处，仅供学习参考使用。特别感谢东哥无微不至的讲解。
1.需求：DOM手写轮播图
2.总共分为四部分：
第一部分：控制轮播图从当前位置移动到任意范围内的位置；
第二部分：点击向左，向右箭头控制轮播图的移动；
第三部分：当鼠标移入移出轮播图时，控制轮播图的动作；
第四部分：点击正下方小圆点，控制轮播图的移动；
具体操作内容，请参照注释，代码片段附带详细内容步骤解析。
3.css样式片段如下：

 * {
        margin: 0;
        padding: 0
    }

    #main {
        width: 1000px;
        margin: 0 auto;
        margin-top: 50px;
    }

    #banner {
        width: 1000px;
        overflow: hidden;
        position: relative;
    }
    #banner:hover {
        opacity: 0.8;
    }
    #ulImgs {
        list-style: none;
        width: 5000px;
        margin-left: 0;
    }

    #ulImgs.transition {
        transition: all .5s linear;
    }

    #ulImgs>li {
        width: 1000px;
        float: left;
    }

    #ulImgs img {
        width: 1000px;
    }

    #ulIndexs {
        width: 100px;
        margin: 0 auto;
        list-style: none;
        position: absolute;
        bottom: 25px;
        left: 50%;
        margin-left: -50px;
    }

    #ulIndexs>li {
        float: left;
        width: 10px;
        height: 10px;
        background-color: #fff;
        border-radius: 5px;
        margin: 0 5px;
        cursor: pointer;
    }

    #ulIndexs>li.active {
        background-color: aqua;
    }

    #btn-left,
    #btn-right {
        width: 60px;
        height: 100%;
        position: absolute;
        top: 0;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }

    #btn-left {
        left: 20px;
        background-image: url(carousel_item/left_ar.png);
    }

    #btn-right {
        right: 20px;
        background-image: url(carousel_item/right_ar.png);
    }

    #btn-left:hover,
    #btn-right:hover {
        background-size: 40px 70px;
    }

4.html代码片段如下：

	<div id="main">
        <div id="banner">
            <div id="btn-left"></div>
            <ul id="ulImgs">
                <li><a href="javascript:;"><img src="carousel_item/carousel-5.jpg" alt="曾轶可"></a></li>
                <li><a href="javascript:;"><img src="carousel_item/carousel-6.jpg" alt="失落园"></a></li>
                <li><a href="javascript:;"><img src="carousel_item/carousel-7.jpg" alt="爱你"></a></li>
                <li><a href="javascript:;"><img src="carousel_item/carousel-8.jpg" alt="奔走"></a></li>
                <!-- 实际图片个数比轮播图的个数要多一张，用来重复第一张 -->
                <li><a href="javascript:;"><img src="carousel_item/carousel-5.jpg" alt="曾轶可"></a></li>
            </ul>
            <ul id="ulIndexs">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="btn-right"></div>
        </div>
    </div>

5.js操作代码片段如下：

		var i = 0; //现在正在显示第几张图片，从0开始
        var LIWIDTH = 1000;  //每个li的固定宽度
        var DURATION = 500;  //每次轮播动画持续的时间
        var LICOUNT = 4;  //li的总数
        var interval = 3000; //每次轮播的时间间隔
        var timer = setInterval(function () {
            moveTo();
        }, interval); //轮播定时器
        var ulImgs = document.getElementById("ulImgs");  //要移动的ul
        var ulIndexs = document.getElementById("ulIndexs"); //包含小圆点列表的ul
        var lis = ulIndexs.children; //小圆点的元素列表
        var btnLeft = document.getElementById("btn-left"); //获取左箭头
        var btnRight = document.getElementById("btn-right"); //获取右箭头
        var banner = document.getElementById("banner"); //获取轮播图
        var flag = true; //用开关控制，如果上次动画没有播放完，下次动画不能开始
        var liFlag = true; // 控制小圆点是否能点击的开关
        /******************************第一部分  轮播图移动*************************************************/
        // 从当前位置移动到任意一个范围内的位置
        function moveTo(to) {
            // 如果用户没有传入参数表示要调到第几张图片，就默认跳到当前图片的下一张
            if (to == undefined) {
                to = i + 1; //跳到下一张
            }
            if (i == 0) {  //如果滚动从头开始，再重新加上transition
                if (to > i) { //如果要看当前位置右边的图片时，因为当前位置是初始位置，故是没有问题的
                    ulImgs.className = "transition"; //此时加上动画
                } else {   //否则说明，在i=0的时候还要看左边的图片，
                    // 则此时左边是没有图片的，因此此时应图片切换为最后一张图片
                    ulImgs.className = ""; //去掉动画效果
                    //将ul移动到最后一张图片的位置,因为此时最后一张图片和第一张图片一样，故用户看不出来图片是否切换
                    ulImgs.style.marginLeft = - LICOUNT * LIWIDTH + "px";
                    setTimeout(function () {
                        //延时之后当用户再点击的时候，再移动到真正的最后一张图片，用户就看不出来中间的切换过程
                        moveTo(LICOUNT - 1);
                    }, 100); //延时100ms
                    return;
                }
            }
            i = to; //先将表示第几张图片的变量i变为目标位置，获取显示的第几张图片
            ulImgs.style.marginLeft = - i * LIWIDTH + "px"; //显示第几张图片，ul向左移动的距离
            for (var li of lis) {
                li.className = ""; //先删除所有小圆点的class
            }
            if (i == LICOUNT) { //当轮播最后一个圆点的位置时
                i = 0;          //从第一张图片开始轮播
                setTimeout(function () { //当最后一张的动画完成后
                    ulImgs.className = ""; //去掉ul上的动画
                    ulImgs.style.marginLeft = 0; //瞬间将ul拉回开始位置
                }, DURATION);
            }
            lis[i].className = "active";  //给当前位置的圆点添加样式，图片切换到哪张图片，给哪个小圆点加上背景颜色
        }
        /*******************************第二部分 向左向右箭头**************************************************/
        btnRight.onclick = function () { //点击向右箭头时
            move(1);
        }
        btnLeft.onclick = function () { //点击向左箭头时
            move(-1);
        }
        // 按钮移动函数，当step传入1时，则移动往右移，若传入-1，则向左移
        function move(step) {
            if (flag) { //如果开关开启时，箭头按钮可以点击
                moveTo(i + step); //点击箭头，此时向左或者向右轮播
                flag = false; //关闭开关，禁止再次点击，只有图片动画播放完才允许点击
                setTimeout(function () {
                    flag = true; //动画播放完100ms后才允许再次点击
                }, DURATION + 100);
            }
        }
        /******************************第三部分鼠标移入移出轮播图***********************************************/
        banner.onmouseover = function () { //当鼠标移入轮播图时，清除定时器，使图片不再轮播
            clearInterval(timer);
        }
        banner.onmouseout = function () { //当鼠标移出轮播图时，启用定时器，开启轮播
            timer = setInterval(function () {
                moveTo();
            }, interval);
        }
        /****************************第四部分 小圆点li*******************************************************/
        ulIndexs.onclick = function (e) { //通过事件代理给每一个小圆点的li添加点击事件
            if (liFlag) { //如果开关开启
                var li = e.target;
                if (li.nodeName == "LI") { //如果点击的是li时，不至于点击到其他的地方触发冒泡事件
                    if (li.className !== "active") { //当点击的不是轮播到当前的图片时
                        for (var i = 0; i < lis.length; i++) {
                            if (lis[i] == li) { //如果点击的li和绑定的是同一个时,通过i来确定此时的轮播图需要移动的margin-left
                                break;
                            }
                        }
                        moveTo(i); // 卢波图移动到i位置的距离
                        setTimeout(function () {
                            liFlag = true;  //当轮播图动画执行完毕，小圆点恢复可点状态
                        }, DURATION);
                    }
                }
            }
        }

6.效果如图：

7.特别鸣谢东哥牺牲休息时间的讲解。