原生轮播图

原生js轮播图

Add html

<div id="slider-bar">
    <div id="imgs-box">
        <ul id="imgs-ul">
            <li style="background-image:url(https://i.imgur.com/ndsCDtv.jpg) "></li>
            <li style="background-image:url(https://i.imgur.com/Hq35Eps.jpg) "></li>
            <li style="background-image:url(https://i.imgur.com/0xWwKkn.jpg) "></li>
            <li style="background-image:url(https://i.imgur.com/FrmFGWq.jpg) "></li>
            <li style="background-image:url(https://i.imgur.com/ByArY0x.jpg) "></li>
            <li style="background-image:url(https://i.imgur.com/8IhTKvw.jpg) "></li>

        </ul>
    </div>
    <div id="indicator-box">
        <ol id="indicator-ol">
        </ol>
    </div>
    <div id="control-box">
        <a class="left">上一张</a>
        <a class="right">下一张</a>
    </div>
</div>

Add CSS

        #slider-bar {
            margin: 100px auto;
            width: 750px;
            height: 281px;
            position: relative;
            overflow: hidden;
        }

        #imgs-box ul {
            width: 5250px;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        #imgs-box ul li {
            vertical-align: top;
            width: 750px;
            height: 281px;
            float: left;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }

        #indicator-box ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        #indicator-box ol li {
            width: 20px;
            height: 20px;
            background-color: darkgray;
            display: inline-block;
            margin-right: 3px;
            border-radius: 50%;
            cursor: pointer;
        }

        #indicator-box ol li.current {
            background-color: orangered;
        }

        #control-box {
            position: relative;
            top: 100px;
            width: 100%;
            height: 69px;

        }

        #control-box a {
            display: inline-block;
            width: 41px;
            height: 69px;
            text-indent: -999em;
            position: absolute;

        }

        #control-box a:first-child {
            background-color: #2fb3ff;
            background: url(https://i.imgur.com/LpPhS8J.png) no-repeat -84px 50%;
            left: 20px;
        }

        #control-box a:first-child + a {
            background: url(https://i.imgur.com/LpPhS8J.png) no-repeat -125px 50%;
            right: 20px;
        }

        #control-box .left:hover {
            background: url(https://i.imgur.com/LpPhS8J.png) no-repeat;
        }

        #control-box .right:hover {
            background: url(https://i.imgur.com/LpPhS8J.png) no-repeat -43px 50%;

        }

Add JavaScript

 // 封装函数：获取元素对象
    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }
    /**
     * @param tag 移动元素对象
     * @param targetX 移动的位置
     * @param step 元素移动的步长/步长越大/移动速度越快
     */
    // 封装函数：移动
    function animate(tag, targetX, step) {
        clearInterval(tag.timer); // 清除定时器：一个元素只能有一个定时器,而定时器本身就是元素的一个属性。
        var step2 = targetX > tag.offsetLeft ? step : -step; // 根据本身位置和目标位置判断移动方向：正数右移，负数左移。
        tag.timer = setInterval(move, 1) // 设置定时器：设置tag对象的移动频率

        function move() {
            tag.style.left = tag.offsetLeft + step2 + "px"; // 计算出要移动的位置：当前元素位置+步长。
            var current_distance = targetX - tag.offsetLeft; // 计算出当前元素与目标位置的距离：目标位置-当前元素位置
            if (Math.abs(current_distance) <= Math.abs(step2)) { // 比较当前位置离目标位置的距离是否小于步长，因为步长有负值，所有需要转换成绝对值来比较。
                tag.style.left = targetX + "px"; // tag对象left左边线位置=目标位置
                clearInterval(tag.timer); // 清除定时器
            }
        }
    }
    /*
    * 轮播图：
    * 无限轮播实现原理：图片均速向左移动，到达最后一张图片后整张图片立即归位重新移动。
    * 控制点控制轮播图图片原理，点击控制点
    * 4 自动轮播
    * */
    // 1 克隆第一张图片到尾部
    var img_lis = $("imgs-ul").children; // 获取所有图片
    $("imgs-ul").appendChild(img_lis[0].cloneNode(true)); // 克隆第一张图片到图片集最后
    // 2 动态创建轮播图片指针
    for (var i = 0; i < img_lis.length - 1; i++) { // 图片的个数就是循环函数运行的次数
        var li = document.createElement("li"); // 获取创建节点对象
        $("indicator-ol").appendChild(li); // 添加节点
    }
    $("indicator-ol").children[0].className = "current"; // 设置默认选中的控制点

    // 3 自动轮播
    slider_auto_speed();

    function slider_auto_speed() {
        var timer = setInterval(autoPlay, 2000);    // 设置定时器函数
        $("slider-bar").onmouseover = function () { // 鼠标移入时
            clearInterval(timer); // 清除定时函数
        };
        $("slider-bar").onmouseout = function () {  // 鼠标移出时
            timer = setInterval(autoPlay, 2000); // 重新设置定时器函数
        };
    }

    function autoPlay() {
        img_index++;
        if (img_index >= img_lis.length) { // 如果当前下标等于/超出最后一个图片下标
            img_index = 1; // 重置当前图片下标（为什么是1而不是0，因为最后一张图显示了第一张图片（第一张图片下标0），所有将直接显示第二张图片）
            $("imgs-ul").style.left = 0; // 将图片集位置归零
        }
        animate($("imgs-ul"), img_index * -750, 20); // 从当前图片下标位置开始移动

        indicator_index++; // 控制点下标自增
        if (img_index >= indicator_ol_lis.length) { // 如果控制点下标等于/大于最后一个控制点下标
            indicator_index = 0; // 控制点下标归零
        }
        for (var i = 0; i < indicator_ol_lis.length; i++) {
            indicator_ol_lis[i].className = ""; // 清除控制点的选中
        }
        indicator_ol_lis[indicator_index].className = "current"; // 给当前控制点设置选中
    }

    // 4 鼠标点击指针
    var img_index = 0; // 图片下标E
    var indicator_index = 0; // 指针下标

    var indicator_ol_lis = $("indicator-ol").children;
    for (var j = 0; j < indicator_ol_lis.length; j++) { //
        (function (j) {
            var li = indicator_ol_lis[j]; // 获取控制点
            li.onclick = function () { // 鼠标点击控制点
                for (var i = 0; i < indicator_ol_lis.length; i++) {
                    indicator_ol_lis[i].className = ""; // 清除所有选中
                }
                this.className = "current"; // 设置选中this
                animate($("imgs-ul"), -(750 * j), 20); // 将图片容器移动到指定图片的X轴坐标
                img_index = indicator_index = j;
            };
        })(j);
    }
    // 5 左右控制
    var left = $("control-box").children[0];
    var right = $("control-box").children[1];
    left.onclick = function () {
        if (img_index <= 0) {
            $("imgs-ul").style.left = "-4500px";
            img_index = img_lis.length - 2;
        } else {
            img_index--;
        }
        console.log("img_index" + img_index);

        animate($("imgs-ul"), -(750 * img_index), 20); // 将图片容器移动到指定图片的X轴坐标

        if (indicator_index <= 0) { // 如果控制点下标等于/大于最后一个控制点下标
            indicator_index = indicator_ol_lis.length - 1; // 控制点下标归零

        } else {
            indicator_index--;
        }
        console.log("indicator_index" + indicator_index);

        for (var i = 0; i < indicator_ol_lis.length; i++) {
            indicator_ol_lis[i].className = ""; // 清除控制点的选中
        }
        indicator_ol_lis[indicator_index].className = "current"; // 给当前控制点设置选中
    }
    right.onclick = function () {
        if (img_index >= img_lis.length - 1) {
            img_index = 1;
            $("imgs-ul").style.left = 0; // 将图片集位置归零

        } else {
            img_index++;
        }
        console.log("img_index" + img_index);
        animate($("imgs-ul"), -(750 * img_index), 20); // 将图片容器移动到指定图片的X轴坐标

        if (indicator_index >= indicator_ol_lis.length - 1) { // 如果控制点下标等于/大于最后一个控制点下标
            indicator_index = 0; // 控制点下标归零
        } else {
            indicator_index++;
        }
        console.log("indicator_index" + indicator_index);
        for (var i = 0; i < indicator_ol_lis.length; i++) {
            indicator_ol_lis[i].className = ""; // 清除控制点的选中
        }
        indicator_ol_lis[indicator_index].className = "current"; // 给当前控制点设置选中
    }