用原生JS写轮播图

今天我们来用原生JS写一个左右滚动的轮播图

HTML结构

<div class="all" id='box'>

        <!-- 显示图片的区域 -->
        <div class="screen">
            <ul>
                <li><img src="images/1.jpg" width="500" height="200" /></li>
                <li><img src="images/2.jpg" width="500" height="200" /></li>
                <li><img src="images/3.jpg" width="500" height="200" /></li>
                <li><img src="images/4.jpg" width="500" height="200" /></li>
                <li><img src="images/5.jpg" width="500" height="200" /></li>
                <!--  先给html中的li再加一个li，这个li的内容是第一张图片 用于实现无线循环 -->
                <li><img src="images/1.jpg" width="500" height="200" /></li>
            </ul>
            <!-- 页码-->
            <ol>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>

        </div>
        <!-- 左右箭头那一部分-->
        <div id="arr">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
</div>

以上样式主要有箭头和页码,点击箭头和页码实现页面轮播(工作中可以随意使用箭头或者页码)

CSS样式

* {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            /*  此处需要给父级定位,保证offsetLeft的值变化(父相)  */
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
        /*  此处一定要用定位(子绝)  */
            position: absolute;
            left: 0;
            top: 0;
            /*要足够宽才放到一行里*/
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        /*点到哪个页码就让哪个页码加一个current类就变黄了*/
        .all ol li.current {
            background: yellow;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            /*透明度：这个是指全透明*/
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            /*距离父元素右边5像素*/
            right: 5px;
            /*代表把left的值清空（设置为默认值）*/
            left: auto;
        }
   

JS原生代码

/**
 * 移动动画封装函数
 */
function animate(obj, target) {

    // 每次先停止上一个计时器
    clearInterval(obj.timerID);
    obj.timerID = setInterval(function () {

        // 获得它当前位置 要求子元素和父级元素都要定位（切记）
        var current = obj.offsetLeft;

        // 判断距离够不够走这一步，够走就走，不够就直接到
        if (Math.abs(target - current) > 10) {
            // 走一步
            current += target > current ? 10 : -10;
            // 赋值给left
            obj.style.left = current + "px";
        } else {
            obj.style.left = target + "px";
        }

        if (current == target) {

            clearInterval(obj.timerID);
        }
    }, 10);
};

//  找到大盒子
        var box = document.querySelector('#box');
        // 找到箭头
        var arr = document.querySelector('#arr');

        //  找到ul
        var ul = document.querySelector('ul');

        //  找到放图片的div的宽度
        var screenW = document.querySelector('.screen').offsetWidth;

        // 5. 找到ol下面的所有li（也就是找到所有页码）
        var pageList = document.querySelectorAll('ol>li');


        // 大盒子鼠标移入
        box.onmouseover = function () {

            arr.style.display = "block";
            //停止计时器
            clearInterval(timerID);
        }

        // 大盒子鼠标移出
        box.onmouseout = function () {

            arr.style.display = "none";
            timerID = setInterval(nextPage,2200);
        }

        // 准备一个变量index，默认从0开始，因为默认显示下标0的图片
        var index = 0;


        // 页面一打开就加一个计时器
        // setInterval(function () {

        //     // document.getElementById('right').onclick();

        // }, 2200);

        // 每隔一段时间调用下一页的代码
        var timerID = setInterval(nextPage,2200);

        function nextPage() {

            // 在下一页点击事件里做个判断，如果是最后一张，就闪现到第一张，然后再下一张
            // 做判断，判断它当前是不是最后一张（也就是看起来是第一张的那个图）
            // 如果是就先闪现到下标0的那张
            if (index == ul.children.length - 1) {
                index = 0;
                ul.style.left = 0;
            }

            // 让index++
            index++;

            // 用最新的-下标*宽度赋值给ul
            // var current = -index * screenW;
            // ul.style.left = current + "px";
            // 参数1：移动哪个元素
            // 参数2：目标位置
            animate(ul, -index * screenW);

            // 先让所有页码去掉高亮
            for (var i = 0; i < pageList.length; i++) {

                pageList[i].className = "";
            }

            // 如果是最后一张（看起来是第一张的那张图片）
            if (index == ul.children.length - 1) {

                //就让下标0的页码高亮
                pageList[0].className = "current";

            } else {
                // 还要当前显示第几个图片，就让第几个页码高亮
                pageList[index].className = "current";
            }
        }

        // 下一页的点击事件
        document.getElementById('right').onclick = function () {

            nextPage();
        };

        //  完成上一页点击事件
        document.getElementById('left').onclick = function () {

            // 在上一页点击事件里做个判断，如果是第一张，就闪现到最后一张，然后再上一张
            if (index == 0) {

                //闪现到最后一张（也就是看起来内容是第一张的图片,下标是长度-1）
                index = ul.children.length - 1;
                ul.style.left = -index * screenW + "px";
            }

            index--;
            animate(ul, -index * screenW);

            //排他
            for (var i = 0; i < pageList.length; i++) {

                pageList[i].className = "";
            }
            // 图片是下标几，就取出下标几的页码
            pageList[index].className = "current";
        };


        // 遍历所有页码给它们加点击事件
        for (var i = 0; i < pageList.length; i++) {

            // 先把下标存到每个页码身上
            pageList[i].setAttribute('index', i);

            pageList[i].onclick = function () {

                // 一开始判断，如果当前图片是最后一页，就闪现到第一页
                if (index == ul.children.length - 1) {

                    index = 0;
                    ul.style.left = 0;
                }

                //获取被点击的页码的下标
                var idx = this.getAttribute('index');

                // 如果你当前是第一页，并且点击的是最后一个页码
                if (index == 0 && idx == pageList.length - 1) {

                    //闪现到最后一页
                    index = ul.children.length - 1;
                    ul.style.left = -index * screenW + "px";
                }

                // 点哪个下标的页码就让对应的图片到对应的下标去
                animate(ul, -idx * screenW);

                // 还要让记录图片下标的index更新成对应的下标
                index = idx;

                //排他去掉高亮
                for (var j = 0; j < pageList.length; j++) {

                    pageList[j].className = "";
                }

                this.className = "current";

            }
        }