原生js简单版轮播图（无左右箭头版）

这个是最简单版的原生js轮播图，没有左右箭头版本的噢（有空了我再发其它版本的轮播源码）大部分的注释再源码上面都写有啦，实在不清楚轮播的原理的话可以留言~~
js源码：

<script src="../animation.js"></script>
    <script>
        //获取相应的元素
        let spanArr = document.getElementsByTagName('span');
        //移动的元素
        let ulBox = document.querySelector('.inner ul');
        console.log(ulBox);
        //初始的宽度
        let innerWidth = document.querySelector('.inner').offsetWidth;
        //定义一个变量标记点的第几个span
        let index = 0;
        for (let i = 0; i < spanArr.length; i++) {
            //自定义属性 index i
            spanArr[i].setAttribute('index', i);
            //spanArr的单击事件
            spanArr[i].onclick = function () {
                //排他 清空所有span的类名
                for (let j = 0; j < spanArr.length; j++) {
                    spanArr[j].removeAttribute('class');
                }
                //单击的span变色(加上了类名 current)
                this.setAttribute('class', 'current');
                //移动宽度  -i*innerWidth
                let position = -this.getAttribute('index') * innerWidth;
                //调用函数
                moveAnimation(ulBox, position);
            }
        }
    </script>

css源码：

<style>
        * {
            margin: 0;
            padding: 0
        }
        ul {
            list-style: none
        }
        img {
            vertical-align: top
        }
        .box {
            width: 490px;
            height: 170px;
            margin: 100px auto;
            padding: 5px;
            border: 1px solid #ccc;
        }
        .inner {
            width: 490px;
            height: 170px;
            background-color: pink;
            overflow: hidden;
            position: relative;
        }
        .inner ul {
            width: 1000%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .inner li {
            float: left;
        }
        .square {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .square span {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #fff;
            text-align: center;
            line-height: 16px;
            cursor: pointer;
        }
        .square span.current {
            background-color: orangered;
            color: #fff;
        }
    </style>

html源码：

 <div class="box" id="box">
        <div class="inner">
            <ul>
                <li><a href="#"><img src="images/01.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/02.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/03.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/04.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/05.jpg" alt="" /></a></li>
            </ul>
            <div class="square">
                <span class="current">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </div>
        </div>
    </div>

animation.js源码(无注释版本)：

/**
 * 
 * @param {位移元素} elm 
 * @param {目标位置} target 
 */
function moveAnimation(elm,target) {
    clearInterval(elm.timeID);
    let position = elm.offsetLeft;
    let step = (target - position) > 0 ? 10 : -10;
    elm.timeID = setInterval(
        function () {
            position += step;
            if (Math.abs(target - position) > Math.abs(step)) {
                elm.style.left = position + 'px';
            } else {
                elm.style.left = target + 'px';
                clearInterval(elm.timeID);
            }
        },20
    )
}

如果想要animation.js注释版的话留言我下次发吧~