一般而言轮播图都需要使用到动画效果，我这里是原生 js 手写一个动画，基于这个动画效果，在实现我们的轮播图。
封装了一个小插件，我把它命名为：slideshow .js ，源码如下：

function animate(elem, options, callback) {
    if (elem == null){
        //说明现在不是那个轮播图页面了
        return;
    }
    let timer = null;
    let attribute = options.attribute;
    let startValue = parseFloat(window.getComputedStyle(elem)[attribute]);
    let endValue = parseFloat(options.value);
    let unit = options.value.substr(endValue.toString().length);
    if (!options.fluency) {
        options.fluency = 5;//流畅值，该值越小越流畅
    }
    if (startValue == endValue) {
        if (callback != undefined) {
            callback.call();
        }
        return;
    }
    function createTime() {
        return (+new Date);
    }
    let startTime = createTime();
    function logic() {
        //开始时间 + 持续时间 - 当前时间，结果即为动画的剩余时间，当剩余时间小于0则置0，表示动画结束
        let remaining = Math.max(0, startTime + options.duration - createTime());
        //remaining/duration即为动画剩余的百分比，用1去减，得到已执行的百分比
        let percent = 1 - (remaining / options.duration);
        let nowValue = (endValue - startValue) * percent + startValue;
        if (nowValue === 0){
            elem.style[attribute] = nowValue;
        } else {
            elem.style[attribute] = nowValue + unit;
        }
        if (percent === 1) {
            clearInterval(timer);
            if (callback != undefined) {
                callback.call();
            }
            return;
        }
    }
    timer = setInterval(logic, options.fluency);
}
let slideshow = {
    autoSlide:true,//是否自动轮播
    animating:false,//当前对象是否正在执行动画
    defaultWidth:1325,//对应于设计图1920px的宽度
    width:1325,//根据当前屏幕宽度，适配的真正的宽度
    unit:'px',
    ulSelector:'.hot ul',
    slideBoxSelector:'.slide-box',
    intervals:[],//定时器的集合，当我们离开页面时，需要清除它们
    next(){
        if(slideshow.animating) return;
        slideshow.animating = true;
        let ul = document.querySelector(slideshow.ulSelector);
        animate(ul, {attribute: 'left', value: -slideshow.width + slideshow.unit, duration:1500},function(){
            ul.appendChild(ul.children[0]);
            ul.style.left = 0;
            slideshow.animating = false;
        });
    },
    prevEvent:function(){
        let prevButton = document.getElementsByClassName("prev")[0];
        prevButton.onclick = function(){
            if(slideshow.animating) return;
            slideshow.animating = true;
            let ul = document.querySelector(slideshow.ulSelector);
            ul.style.left = -slideshow.width + slideshow.unit;
            ul.insertBefore(ul.children[ul.children.length-1],ul.children[0]);
            animate(ul,{ attribute: 'left', value: "0" + slideshow.unit, duration:1500},function(){
                slideshow.animating = false;
            });
        }
    },
    nextEvent:function(){
        let nextButton = document.getElementsByClassName("next")[0];
        nextButton.onclick = function(){
            slideshow.next();
        }
    },
    init:function(){
        function run(){
            slideshow.autoSlide = true;
            slideshow.animating = false;
            slideshow.intervals = [];
            let ul = document.querySelector(slideshow.ulSelector);
            if (ul == undefined){
                return;
            }
            let liArr = ul.getElementsByTagName("li");
            if(liArr.length<=1) return;
            let autoSlideInterval = setInterval(function(){
                if(! slideshow.autoSlide) return;
                slideshow.next();
            },8000);
            slideshow.intervals.push(autoSlideInterval);
            let slideBox = document.querySelector(slideshow.slideBoxSelector);
            slideBox.onmouseover = function(){
                slideshow.autoSlide = false;
            }
            slideBox.onmouseout = function(){
                slideshow.autoSlide = true;
            }
            slideshow.prevEvent();
            slideshow.nextEvent();
        }
        run();
        /*如果您的页面使用的是 rem 单位，请解开以下注释，同时注释上一行run();*/
        // let initInterval = setInterval(function () {
        //     let remV = parseFloat(document.documentElement.style.fontSize);
        //     if (remV != NaN){
        //         window.clearInterval(initInterval);
        //         initInterval = null;
        //     } else {
        //         return;
        //     }
        //     if(initInterval != null){
        //         slideshow.intervals.push(initInterval);
        //     }
        //     slideshow.width = slideshow.defaultWidth/16*remV;
        //     run();
        // },100);
    },
    //离开页面时调用
    destroy:function () {
        for(let i = 0;i<slideshow.intervals.length;i++){
            window.clearInterval(slideshow.intervals[i]);
        }
    }
}
/*如果您使用的vue，请解开以下注释 */
// export {
//     slideshow
// }

这个插件怎么用呢，首先引入到html页面。

然后进行轮播图的布局。

布局采用的是大家常见的 无缝滚动轮播图。
HTML布局：

 <div class="slide-box">
     <span class="prev"></span>
     <div class="hot">
         <ul>
             <li style="background-color: gray;">
                 轮播图1
             </li>
             <li style="background-color: hotpink;">
                 轮播图2
             </li>
             <li style="background-color: #008c8c;">
                 轮播图3
             </li>
         </ul>
     </div>
     <span class="next"></span>
 </div>

CSS样式：

css样式是需要根据实际情况调整的

 .slide-box {
     width: 1325px;
     height: 221px;
     margin: 66px auto 0;
     position: relative;
 }

 .slide-box .prev,
 .slide-box .next {
     display: block;
     width: 23px;
     height: 39px;
     position: absolute;
     top: 91px;
     cursor: pointer;
 }

 .slide-box .prev {
     /*background-image: url('../../assets/img/profile/zuo.png');
background-size: 100% 100%;*/
     background-color: hotpink;
     left: -53px;
 }

 .slide-box .next {
     /*background-image: url('../../assets/img/profile/you.png');
background-size: 100% 100%;*/
     background-color: blue;
     right: -53px;
 }

 .slide-box .hot {
     width: 1325px;
     height: 221px;
     overflow: hidden;
 }

 .slide-box .hot ul {
     width: 3975px;
     height: 221px;
     position: relative;
 }

 .slide-box ul li {
     width: 1325px;
     height: 221px;
     float: left;
     font-size: 80px;
     list-style: none;
 }

最后就是调用了，如果你使用的是vue，你可以这样：

import {slideshow} from './slideshow';

export default {
    data() {
        return {
            
        }
    },
    components: {
       
    },
    mounted() {
        slideshow.init();
    },
    beforeDestroy(){
        slideshow.destroy();
    },
    created() {
    }
}
//同时注意解开前面slideshow.js里的相应注释

如果你使用的原生html，直接调用：

   window.onload = function () {
       slideshow.init();
   };

看看效果：

原生js实现轮播图

每一步都解释很详细
话不多说 上源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/animate.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .wrapAll {
            width: 1226px;
            height: 460px;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
            overflow: hidden;
        }

        .slideBar {
            height: 460px;
            /* width: 4904px; */
            width: max-content;
            position: absolute;
            left: 0;
        }

        .slideBar li {
            width: 1226px;
            float: left;
        }


        .dotList {
            position: absolute;
            right: 50px;
            bottom: 20px;
            display: flex;
        }

        .dotList li {
            width: 15px;
            height: 15px;
            background-color: #fff;
            margin: 5px;
            border-radius: 50%;
        }

        .dotList .active {
            background-color: blue;
        }

        .left,
        .right {
            width: 40px;
            height: 80px;
            background-color: rgba(0, 0, 0, 0.6);
            position: absolute;
            z-index: 999;
        }

        .left {
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            /* margin-top:-40px; */
        }

        .right {
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>

<body>
    <div class="wrapAll">
        <ul class="slideBar">
            <li><img src="../images/1.jpg" alt=""></li>
            <li><img src="../images/2.jpg" alt=""></li>
            <li><img src="../images/3.jpg" alt=""></li>
            <li><img src="../images/4.jpg" alt=""></li>
            <li><img src="../images/1.jpg" alt=""></li>
        </ul>
        <ul class="dotList">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="right"></div>
        <div class="left"></div>
    </div>
</body>
<script>
    var wrapAll = document.querySelector(".wrapAll");
    var slideBar = document.querySelector(".slideBar");
    var slideBarList = document.querySelectorAll(".slideBar li");
    var liList = document.querySelectorAll(".dotList li");

    var left = document.querySelector(".left");
    var right = document.querySelector(".right");



    var index = 0;     //定义一个全局变量  索引
    var timer = null;    //定义一个全局timer 用来记时
    var clientWidth = slideBarList[0].clientWidth;    //获取图片的宽度

    autoPlay();


    for (let i = 0; i < liList.length; i++) {    //循环遍历 获取小圆点
        let li = liList[i];
        li.onclick = function () {       // 圆点li的点击事件
            index = i;
            for (var j = 0; j < liList.length; j++) {     //先清除所有效果
                liList[j].className = "";
            }
            liList[i].className = "active";     //给对应的点击的li赋予效果
            animate(slideBar, "left", -clientWidth * index, "ease-out");   //公共样式animate.js  属性 属性值 终点 运动方式
        }
    }
    left.onclick = function () {     //左边点击事件
        index--;
        auto();
    }
    right.onclick = function () {    //右边点击事件
        index++;
        auto();
    }
    wrapAll.onmouseenter = function () {     //鼠标移入
        clearInterval(timer);
    }
    wrapAll.onmouseleave = function () {    //鼠标移出
        autoPlay();
    }
    function autoPlay() {
        clearInterval(timer);     //清除计时器防止连续点击或移动触发的问题
        timer = setInterval(function () {
            index++;
            auto();
        }, 3000)
    }
    function auto() {
        //这么写的目的是防止有用户连续点击向左或者向右 所产生的问题
        if (index < 0) {         //点击向左运动 如果索引小于0 那么把index变成最后一个索引
            index = slideBarList.length - 1;
            slideBar.style.left = -clientWidth * index + "px";      //此时left值为第五张图片所在
            index--;       //变成第四张我们所需要的图片
        }
        if (index >= slideBarList.length) {      //点击向左运动 如果索引大于slideBarList长度 此时最长的是第五张照片 也就是第一张
            slideBar.style.left = 0;     //利用视觉差跳回第一张图片
            index = 0;      //索引为第一张
            index++;   //索引增加
        }

        for (var j = 0; j < liList.length; j++) {     //循环遍历清除li的效果
            liList[j].className = "";
        }
        liList[index >= slideBarList.length - 1 ? 0 : index].className = "active";     //给对应的li增添效果

        animate(slideBar, "left", -clientWidth * index, "ease-out", function () {
            if (index >= slideBarList.length - 1) {
                slideBar.style.left = 0;
                index = 0;
            }
        })
    }
</script>

</html>

animate.js文件

function animate(ele, attr, end, aniType, fn) {   // 1000
    // var cur = ele.offsetLeft;  //  初始值 记录盒子当前的位置(left)
    var cur = parseFloat(getStyle(ele, attr));  //  初始值 记录盒子当前的位置(left)

    var end = parseFloat(end);

    if (attr == "opacity") {  // 如果是opacity  取值时 扩大100倍
        cur *= 100;
        end *= 100;
    }

    // cur 
    // 1. 点击时 记录盒子的初始位置 (初始值)
    // 2. 每隔固定的时间,进行累加/累减  (记录每次运动之后位置)

    var speed = 0;

    // 问题  公用一个全局timer  多个元素同时运动时  会相互影响
    // ele  元素节点  => 本质(对象)  => 可以自定义属性
    // 解决办法 :  把计时器的编号存到元素自己本身上 

    clearInterval(ele.timer);
    ele.timer = setInterval(function () {

        if (aniType == "linear") {
            // 匀速运动 linear  (normal)
            speed = end > cur ? 20 : -20;
        } else if (aniType == "ease-in") {
            // 加速    ease-in  (fast)
            // end > cur ? speed++ : speed--;
            speed = end > cur ? speed + 5 : speed - 5;
        } else if (aniType == "ease-out") {

            // 缓冲运动  ease-out  (slow) 
            // (终点值 - 当前值)/缓冲因子    => 剩余的距离 / 缓冲因子  
            // 缓冲因子 一般在8-12
            // 正向运动  (0-1000  speed正值)
            // speed = (end - cur) / 10;
            // speed = Math.ceil(speed);   // 0.1111  => 1
            // console.log(speed);

            // 反向运动  (1000-0  speed负值)
            // speed = (end - cur) / 10;
            // speed = Math.floor(speed);  // -0.11111  => -1
            // console.log(speed);

            speed = (end - cur) / 10;
            speed = end > cur ? Math.ceil(speed) : Math.floor(speed);
        }

        cur += speed;

        if (attr == "opacity") {   //   如果是opacity  赋值时 缩小100倍
            ele.style[attr] = cur / 100;
        } else {
            ele.style[attr] = cur + "px";
        }

        // 临界值
        if (Math.abs(end - cur) < Math.abs(speed)) {    // 理想情况  cur == end
            clearInterval(ele.timer);

            if (attr == "opacity") {   //   如果是opacity  赋值时 缩小100倍
                ele.style[attr] = end / 100;
            } else {
                ele.style[attr] = end + "px";
            }

            if (fn) { // 本次运动结束 如果传入了函数  就执行
                fn();
            }
        }

    }, attr == "opacity" ? 50 : 10);
}


function getStyle(ele, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(ele)[attr];
    } else {
        return ele.currentStyle[attr];
    }
}

图片

主要实现的是PC端的轮播（移动端的轮播应该还要实现拖拽功能），主要实现了以下功能：

1. 自动循环轮播
2. 鼠标进入停止轮播，鼠标移出开始自动轮播
3. 点击上一张或者下一张实现图片的切换
4. 点击轮播图底部的圆点实现图片的切换

思路：

1. 自动轮播封装了一个autoSwiper函数；
2. 鼠标进入/移出封装了handleMouseEvent函数；
3. 点击上一张/下一张封装了handleClickEvent函数；
4. 点击轮播图底部的圆点实现图片的切换封装了handleClickIcon函数

        这样封装的好处就是代码看起来更清晰，思路更明确，不会感觉一团糟的感觉。要实现以上功能，这个函数之间联系也十分紧密，比如autoSwiper函数可以正常实现，但是当执行了handleClickIcon函数后，可能会导致autoSwiper报错，因此十分谨慎的处理函数之间的公共变量。与这几个函数联系紧密的主要是swiperWidth(所有图片的宽度)，startPosition(swiper当前的位置)，swiperleft(swiper的left值);

现在具体介绍下具体的实现：

        首先是HTML结构，有一点要十分注意，ul必须使用绝对定位(postion：absolute)，后续的操作都是通过doc.style.left来改变其位置的：

<div class="swiper">
        <div class="container">
            <div class="swiper-wrapper">
                <!-- 图片 -->
                <ul class="swiper-wrapper-box">
                    <li class="swiper-item banner-1"></li>
                    <li class="swiper-item banner-2"></li>
                    <li class="swiper-item banner-3"></li>
                </ul>
            </div>

            <!-- 左右箭头 -->
            <div class="arrow">
                <div class="arrow-l"></div>
                <div class="arrow-r"></div>
            </div>
            <!-- 圆点 -->
            <div class="icon-box">
                <ul class="icon-box-wrapper">
                    <li class="icon-item" data-index="1"></li>
                    <li class="icon-item" data-index="2"></li>
                    <li class="icon-item" data-index="3"></li>
                </ul>
            </div>
        </div>
    </div>

  然后重点介绍下swiper.js（所有的业务逻辑都在这里）：

  刚开始要把需要用到的DOM元素获取到：

// 获取元素
    var swiperWrapper = document.querySelector('.swiper-wrapper-box')
    var swiperItemList = document.querySelectorAll('.swiper-item ')
    var iconItemList = document.querySelectorAll('.icon-item')
    var swiper = document.querySelector('.swiper')
    // 转为数字组
    var iconArrayList = Array.from(iconItemList)

 接着要进行初始化操作：

// 初始化设置
    var startPosition = 0 // 轮播图刚开始的位置为0
    swiperWrapper.style.left = startPosition + 'px'
    var swiperleft = 0 // 定义轮播图初始wei位置为0
    var unitWidth = 600 // 定义轮播图每次滚动的距离
    var swiperWidth = unitWidth * (swiperItemList.length) // 整个轮播图的宽度
    iconArrayList[0].classList.add('active') // 设置初始的激活icon为第一个
    var index = 0 // 设置icon初始下标index为0  
    var intervelTime = 1000 // 设置轮播间隔时间
    var isLoop = false // 是否为循环轮播

        上面的准备工作做好后就可以开始功能的实现了，先来实现自动轮播的功能。这里必须要用到setInterval了：

// 实现自动轮播
    var timer = setInterval(autoSwiper, intervelTime);

    // 自动轮播
    function autoSwiper () {
        // 每次执行前将所有的active样式设置为空
        iconArrayList.forEach(function (item) {
            item.classList.remove('active')
        })
        // 判断是否循环轮播，是则从第二张开始
        if (isLoop) {
            startPosition = unitWidth
            index = 1
            isLoop = false
        }
        if (startPosition <= swiperWidth - unitWidth && index < iconArrayList.length) {
            swiperWrapper.style.left = -startPosition + 'px'
            // 获取swiper的left值
            swiperleft = -parseInt(swiperWrapper.style.left)
            // 根据条件激活对应样式
            if (startPosition == swiperleft) {
                iconArrayList[index].classList.add('active')
            }
            startPosition += unitWidth
            index++
        } else { // 实现循环滚动
            swiperWrapper.style.left = 0 + 'px'
            iconArrayList[0].classList.add('active')
            startPosition = 0
            index = 0
            isLoop = true
        }
    }

这个函数其实就做了三件事：

1. 每次轮播前都必须把所有圆点激活样式清空；
2. 自动轮播。自动轮播其实很好理解，难点在循环轮播；
3. 循环轮播。判断是否轮播的依据为postion的值，当postion不符合条件时进行循环轮播，但是直接这样会出现个小Bug，就是轮播到第一张，再到第二张时候，间隔时间变长了，变为2s了，这是因为它执行了两次，因此我设置了一个中间变量isLoop，当isLoop为true时直接让它从第二张开始轮播。

接着是鼠标进入和移出的实现，这个功能主要用的是事件委托：

// 鼠标进入停止轮播/移出开始轮播
    swiper.addEventListener('mouseover', handleMouseEvent)
    swiper.addEventListener('mouseout', handleMouseEvent)

    // 处理鼠标进入/移出事件
    function handleMouseEvent (e) {
        var className = e.target.className
        if (e.type === 'mouseover') {
            if (className === 'arrow-l') {
                clearInterval(timer)
            } else if (className === 'arrow-r') {
                clearInterval(timer)
            } else if (e.target.classList.contains('swiper-item')) {
                clearInterval(timer)
            } else if (e.target.classList.contains('icon-item')) {
                clearInterval(timer)
            }
        } else {
            if (className === 'arrow-l') {
                timer = setInterval(autoSwiper, intervelTime)
            } else if (className === 'arrow-r') {
                timer = setInterval(autoSwiper, intervelTime)
            } else if (e.target.classList.contains('swiper-item')) {
                timer = setInterval(autoSwiper, intervelTime)
            } else if (e.target.classList.contains('icon-item')) {
                timer = setInterval(autoSwiper, intervelTime)
            }
        }
    }

然后是点击上一张/下一张。这里也要注意每次点击的时候要清除圆点的激活样式，还有循环轮播的问题。这里就是！！！特别要注意startPosition 的正负，这个值还会影响函数autoSwiper。 

// 点击上一张/下一张
    swiper.addEventListener('click', handleClickEvent)
    // 处理点击事件
    function handleClickEvent (e) {
        // 获取类名
        var className = e.target.className
        // 获取swiper的left值
        swiperleft = -parseInt(swiperWrapper.style.left)
        if (className === 'arrow-l') { // 点击上一张
            // 每次执行前将所有的active样式设置为空
            iconArrayList.forEach(function (item) {
                item.classList.remove('active')
            })
            startPosition = swiperleft - unitWidth
            index = startPosition / unitWidth
            if (startPosition >= 0) {
                swiperWrapper.style.left = -startPosition + 'px'
                iconArrayList[index].classList.add('active')
            } else { // 循环轮播
                index = iconItemList.length - 1
                swiperWrapper.style.left = - unitWidth * index + 'px'
                iconArrayList[index].classList.add('active')
                startPosition = swiperWidth
            }
        } else if (className === 'arrow-r') { // 点击下一张
            // 每次执行前将所有的active样式设置为空
            iconArrayList.forEach(function (item) {
                item.classList.remove('active')
            })
            startPosition = -swiperleft - unitWidth
            index = Math.abs(startPosition) / unitWidth
            if (startPosition >= unitWidth - swiperWidth && startPosition <= 0) {
                swiperWrapper.style.left = startPosition + 'px'
                iconArrayList[index].classList.add('active')
                startPosition = Math.abs(startPosition)
                if (startPosition === unitWidth - swiperWidth) {
                    startPosition = swiperWidth // 解决点击到最后一张，自动轮播到第一张报错的问题
                }
            } else { // 循环轮播
                index = 0
                swiperWrapper.style.left = 0 + 'px'
                iconArrayList[index].classList.add('active')
                startPosition = 0
            }
        }
    }

最后就是点击圆点切换图片 ：

// 点击icon切换轮播图
    swiper.addEventListener('click', handleClickIcon)

    // 处理点击icon切换轮播图事件
    function handleClickIcon (e) {
        // 获取类名
        var className = e.target.className
        if (className.substring(0, 9) === 'icon-item') {
            index = e.target.dataset.index - 1
            // 每次执行前将所有的active样式设置为空
            iconArrayList.forEach(function (item) {
                item.classList.remove('active')
            })
            iconArrayList[index].classList.add('active')
            startPosition = index * unitWidth
            swiperWrapper.style.left = -startPosition + 'px'
        }
    }