原生JS实现轮播图详细含源码

1.静态布局介绍

1.1 HTML布局介绍

<div class="all" id='box'>
        <div class="screen">
            <ul>
                <li><img src="images/01.jpg" width="500" height="200" /></li>
                <li><img src="images/02.jpg" width="500" height="200" /></li>
                <li><img src="images/03.jpg" width="500" height="200" /></li>
                <li><img src="images/04.jpg" width="500" height="200" /></li>
                <li><img src="images/05.jpg" width="500" height="200" /></li>
                <li><img src="images/01.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>

1.2 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;
            position: relative;
        }

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

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            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;
        }

        .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 {
            right: 5px;
            left: auto;
        }

核心思路就是在最后一张图后面再加一张与第一张一模一样的图，记得ul宽度要放得下所有图片
效果图如下：

实现的大概思路就是，ul里面放图片，然后给ul绝对定位，通过动画来改变ul定位位置，每次移动一个图片宽的距离

overflow:hidden，溢出隐藏效果如下图：

2.核心js代码及思路

开发思路：
1. 获取页面元素
2. 完成事件1 ： 鼠标移入移出box
3. 完成事件2 : 鼠标单击上一页下一页
4. 完成事件3 : 鼠标单击页码

接下来根据思路一步一步实现吧~

1. 获取页面元素

//1. 获取页面元素
    var box = document.querySelector('#box');//获取大盒子
    var screen = document.querySelector('.screen');//获取图片展示区
    var ul = document.querySelector('ul');//获取ul列表
    var olList = document.querySelectorAll('ol>li');//获取ol页码
    var arr = document.querySelector('#arr');//获取上下页
    var left = document.querySelector('#left');//获取上一页
    var right = document.querySelector('#right');//获取下一页

    var index = 0;//申明变量存储下标

2. 完成事件1 ： 鼠标移入移出box

//2. 完成事件1 ： 鼠标移入移出box 显示/隐藏上下页
    //鼠标移入
    box.onmouseover=function(){
        arr.style.display = 'block';
    }
    //鼠标移出
    box.onmouseout=function(){
        arr.style.display = 'none';
    }

3. 完成事件2 : 鼠标单击上一页下一页
完成上下页之前，首先准备一个缓动动画函数，次函数详情可见：https://blog.csdn.net/weixin_44427998/article/details/106526614

//移动函数
    function animationSlow(ele,target){
        //1.清除以前定时器，以本次为准
        clearInterval(ele.timeID);
        //2.开启定时器
        ele.timeID = setInterval(function(){
            //2.1获取元素当前位置
            var current = ele.offsetLeft;
            //2.2计算每次移动距离 （目标位置 - 当前位置）/10
            var step = (target - current)/10
            //2.3取整 大于零 从左往右 向下取整 小于零 从右往左 向下取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //2.4移动
            current += step;
            ele.style.left = current + 'px';
            //2.5终点检测
            if( current == target){
                clearInterval(ele.timeID);
            }
        },20);
    }

点击下一页

//点击下一页
    right.onclick=function(){
        //当下标为ul图片列表最大下标时,将下标回到0
        if(index == ul.children.length-1){
            ul.style.left = '0px';
            index = 0;
        }
        index++;
        animationSlow(ul,-screen.offsetWidth * index);
        //修改页码样式
        for(var i = 0;i<olList.length;i++){
            if(index == i){
                olList[i].className = 'current';
            }else {
                olList[i].className = '';
            }
        }
         //如果是最后一个下标 由于ol没有对应下标 此时给ol第一个页码添加样式
         if(index == ul.children.length-1){
            olList[0].className = 'current';
        }

点击上一页

//点击上一页
    left.onclick=function(){
        //当下标为0时，瞬间将下标改为ul图片列表最大下标
        if(index == 0){
                        // -  图片宽度        *   ul最后一张图片下标  = 显示最后一张图
            ul.style.left = -(screen.offsetWidth) * (ul.children.length-1) + 'px';
            index = ul.children.length-1;
        }
        index--;
        animationSlow(ul,-screen.offsetWidth * index);
        //修改页码样式
        for(var i = 0;i<olList.length;i++){
            if(index == i){
                olList[i].className = 'current';
            }else {
                olList[i].className = '';
            }
        }
    }

4. 完成事件3 : 鼠标单击页码

for(var i = 0;i<olList.length;i++){
        olList[i].setAttribute('yemaIndex',i);//给页码添加自定义样式，存储下标
        olList[i].onclick=function(){
            //获取当前点击页码下标
            index = this.getAttribute('yemaIndex');
            animationSlow(ul,-screen.offsetWidth * index);
            //给点击的页码添加样式
            for(var j = 0;j<olList.length;j++){
                if(index == j){
                    olList[j].className = 'current';
                }else {
                    olList[j].className = '';
                }
            }
        }
    }

到此整个轮播图就完成啦，如果需要自动轮播，将下一页点击事件封装为函数，来个定时器就可以啦~