一、原生js实现轮播图

（1）实现功能

1.能够自动平滑的循环轮播。
2.点击导航圆点控制轮播。

（2）html示例代码

<!-- 轮播图外部容器，显示要展示的图片 -->
    <div id="outer">
        <!--设置ul，存储图片  -->
        <ul id="imgList">
            <li>
                <img src="img/1.webp" alt="壁纸">
            </li>
            <li>
                <img src="img/2.webp" alt="壁纸">
            </li>
            <li>
                <img src="img/3.webp" alt="壁纸">
            </li>
            <li>
                <img src="img/4.webp" alt="壁纸">
            </li>
            <li>
                <img src="img/5.webp" alt="壁纸">
            </li>
            <li>
                <img src="img/6.webp" alt="壁纸">
            </li>
            <li>
                <img src="img/1.webp" alt="壁纸">
            </li>
        </ul>
        <!-- 创建导航按钮 -->
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>

（3）css示例代码

<style type="text/css">
        /* 去除默认样式 */
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        body {
            /* 取消文本被选中 */
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期浏览器*/
            user-select: none;
        }
        /* 外部容器 */
        #outer{
            width:533px;
            height:300px;
            background-color:skyblue;
            margin:50px auto;
            padding:10px 0;
            position:relative;
            overflow:hidden;
        }
        /* 设置ul */
        #imgList{
            height: 300px;
            position:absolute;
        }
        /* 设置li */
        #imgList li{
            float:left;
        }
        /* 设置导航按钮 */
        #navDiv{
            position:absolute;
            bottom:20px;
            /* 居中 */
            /* left:50%;
            transform:translateX(-50%); */
        }
        #navDiv a{
            /* 开启浮动后，元素属性会改变，即内联元素变为块元素 */
            float:left;
            width:20px;
            height:20px;
            margin:0 10px;
            border-radius:50%;
            background-color:rgba(187, 255, 170,.3);
        }
        /* 设置鼠标移入 */
        #navDiv a:hover{
            background-color: skyblue;
        }
    </style>

（3）js示例代码

<!-- 引入自定义js动画工具 -->
    <script type="text/javascript" src="js/tools.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            // 获取imgList
            var imgList = document.getElementById("imgList");
            // 获取所有的img标签
            var imgArr = document.getElementsByTagName("img");
            // 设置imgList的宽度(存储所有的图片)
            imgList.style.width = 533*imgArr.length + "px";
            // 获取navDiv
            var navDiv = document.getElementById("navDiv");
            // 获取outer
            var outer = document.getElementById("outer");
            // 设置导航按钮居中
            navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";

            // 获取所有的a标签
            var allA = document.getElementsByTagName("a");
            // 默认显示图片索引
            var index = 0;
            // 设置默认选中颜色效果
            allA[index].style.backgroundColor = "skyblue";

            /**
             * 功能一：点击超链接切换图片
            */
            // 为所有的超链接绑定单击响应函数
            for(var i=0;i<allA.length;i++){
                // 为每个超链接添加一个num属性（为每一个超链接排上序号）
                allA[i].num = i;
                allA[i].onclick = function(){
                    // 关闭自动切换定时器
                    clearInterval(timer);
                    // 获取点击超链接的索引，并将其设置为index
                    index = this.num;
                    // 切换图片
                    /**
                     * 第一张，index = 0，left = 0;
                     * 第二张，index = 1；left = -533;
                     * 第三张，index = 2；left = -1066；
                    */
                    //imgList.style.left = (-533*index) + "px";
                    // 调用设置a的颜色方法
                    setA();
                    // 使用move函数来切换图片
                    move(imgList,"left",-533*index,10,function(){
                        // 动画执行完毕，开启自动轮播
                        autoChange();
                    });
                };
            }
            // 调用自动轮播
            autoChange();
            // 创建一个方法来设置选中的a
            function setA(){
                // 判断当前索引是否是最后一张图片
                if(index >= imgArr.length - 1){
                    //当播放到最后一张图片时，让第一个导航按钮变换颜色。
                    index = 0;
                    //通过改变css来使图片变换为第一张图片
                    imgList.style.left = 0;
                }
                // 遍历所有的a，并将它们的背景颜色设置为空串(防止点击超链接触发单击响应事件后，伪类hover设置的颜色被覆盖掉)
                for(var i=0;i<allA.length;i++){
                    allA[i].style.backgroundColor = "";
                }
                // 设置当前选中的超链接的背景颜色为skyblue
                allA[index].style.backgroundColor = "skyblue";
            }

            //定义变量存储自动切换定时器标识
            var timer;
            // 创建一个函数，开启自动轮播
            function autoChange(){
                // 开启一个定时器，用来定时轮播
                timer = setInterval(function(){
                    // 索引自增
                    index++;
                    if(index>=imgArr.length){
                        index = 0;
                    }
                    // 执行动画，切换图片
                    move(imgList,"left",-533*index,10,function(){
                        // 动画结束修改导航按钮
                        setA();
                    });
                },3000);
            }
        };
    </script>

（4）说明

这里使用到了一个我自己封装的js工具库，有需要的可以去我的github主页下载。

自封装js工具库

（5）效果演示

在这里插入图片描述

二、jQuery实现轮播图

（1）实现功能

1.点击向右(向左)的图标，平滑切换到下(上)一页
2.无限循环切换，第一页的上一页为最后一页，最后一页的下一页是第一页
3.每隔三秒自动滑动到下一页
4.当鼠标进入图片区域时，自动切换停止，当鼠标离开后，开始自动切换
5.切换页面时，下面的原点也同步更新
6.点击圆点图标切换到对应的页
7.解决快速点击出现空白bug

（2）html示例代码

<div class="wrapper">
        <!-- 存放图片 -->
        <ul class="banner">
            <li>
                <img src="img/5.jpg" alt="">
            </li>
            <li>
                <img src="img/1.jpg" alt="">
            </li>
            <li>
                <img src="img/2.jpg" alt="">
            </li>
            <li>
                <img src="img/3.jpg" alt="">
            </li>
            <li>
                <img src="img/4.jpg" alt="">
            </li>
            <li>
                <img src="img/5.jpg" alt="">
            </li>
            <li>
                <img src="img/1.jpg" alt="">
            </li>
        </ul>

        <!-- 轮播图上的导航圆点 -->
        <div class="pointer">
            <span class="display"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

        <!-- 轮播图上左右箭头 -->
        <div class="last"><</div>
        <div class="next">></div>
    </div>

（3）css示例代码

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            /* 取消文本被选中 */
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期浏览器*/
            user-select: none;
        }
        .wrapper{
            width:1202px;
            height:676px;
            margin:0 auto;
            position:relative;
            overflow: hidden;
        }
        .banner {
            height: 676px;
            position: absolute;
            font-size: 0;
        }

        .banner li {
            float: left;
        }
        /* 轮播图导航圆点 */
        .pointer{
          position:absolute;
          bottom:20px;
        }
        .display{
            background-color:red;
        }
        span{
            display: block;
            cursor: pointer;
            width:30px;
            height:30px;
            margin:0 20px;
            float:left;
            background-color: skyblue;
            border-radius: 50%;
        }

        /* 轮播图导航按钮 */
        .last,.next{
            width:40px;
            height:80px;
            color:#fff;
            cursor:pointer;
            font:bolder 16px "楷体";
            text-align: center;
            line-height:80px;
            position:absolute;
            top:45%;
            background-color: rgba(83, 82, 82, 0.3);
        }
        .last:hover,.next:hover{
            color:skyblue;
            font-size:30px;
            background-color: rgba(83, 82, 82, 0.8);
        }
        .last{
            left:0;
        }
        .next{
            right:0;
        }
    </style>

（4）js示例代码

$(function () {
    var $wrapper = $(".wrapper"); //展示图片
    var $banner = $(".banner"); //存储图片
    var $imgList = $(".banner > li");
    var $pointer = $(".pointer");
    var $pointerSpan = $(".pointer > span");
    var $last = $(".last");
    var $next = $(".next");

    var $wrapperWidth = $wrapper.width(); //图片展示窗口宽度
    var $pointerWidth = $pointer.width(); //导航圆点区域宽度
    var $imgLength = $imgList.length; // 所有的img标签数量(计算存放图片容器的宽度)
    var $pointerLength = $pointerSpan.length; //导航圆点数量
    var index = 0; //图片下标
    var move = false;//是否正在翻页(默认没有翻页)
    var TIME = 600;
    var ITEM_TIME = 20;

    /**
     * 1.设置样式
     */
    // 设置ul的宽度(存放图片)
    $banner.css({
        width: $wrapperWidth * $imgLength,
        left: -$wrapperWidth // 设置图片默认向左偏移一个 $wrapperWidth 的距离(用来显示第一张图片)
    });
    // 设置导航圆点居中
    $pointer.css({
        left: ($wrapperWidth - $pointerWidth) / 2
    });

    /**
     * 2.点击向右(向左)的图标，平滑切换到下(上)一页
     */
    $next.click(function () {
        // 平滑翻到下一页
        nextPage(true)
    });
    $last.click(function () {
        // 平滑翻到上一页
        nextPage(false)
    });

    /**
     * 3.每隔三秒自动滑动到下一页
     */
    var timer = setInterval(function () {
        nextPage(true);
    }, 3000);

    /**
     * 4.当鼠标进入图片区域时，自动切换停止，当鼠标离开后，有开始自动切换
     */
    $wrapper
        .mouseenter(function () {
            // 关闭定时器
            console.log("hello");
            clearInterval(timer);
        })
        .mouseleave(function () {
            // 重新开启自动翻页功能
            timer = setInterval(function () {
                nextPage(true);
            }, 3000);
        });

    /**
     * 5.切换页面时，下面的原点也同步更新
     */
    function updatePointer(flag) {
        // 计算出目标圆点的下标targetIndex
        var targetIndex = 0;
        if (typeof flag === "boolean") {
            if (flag) {
                targetIndex = index + 1;
                if (targetIndex === $pointerLength) {
                    targetIndex = 0;
                }
            } else {
                targetIndex = index - 1;
                if (targetIndex === -1) {
                    targetIndex = $pointerLength - 1;
                }
            }
        }else {
            targetIndex = flag;
        }

        // 当前图片对应圆点移除display类
        $pointerSpan.eq(index).removeClass("display");
        // 目标图片对应圆点添加display类
        $pointerSpan.eq(targetIndex).addClass("display");
        // 更新targetIndex的值
        index = targetIndex;
    }

    /**
     * 6.点击圆点图标切换到对应的页
     */
    $pointerSpan.click(function () {
        // 获取目标页的下标
        var targetIndex =$(this).index();
        // 只有当点击的不是当前页的圆点时才翻页
        if(targetIndex != index){
            nextPage(targetIndex);
        }
    });

    /**
     * 平滑翻页
     * @param flag
     * true: 下一页
     * false：上一页
     * 数值：指定下标页
     */
    function nextPage(flag) {
        /**
         * 总的时间：TIME = 400
         * 单元移动的时间间隔：ITEM_TIME = 20
         * 总的偏移量(每张图片要移动的总偏移量)：offset
         * 单元移动的偏移量：itemOffset = offset/(TIME/ITEM_TIME)
         */
        
        // 如果正在翻页过程中，直接结束这个函数（解决快速点击卡空白bug）
        if(move){
            return;
        }
        move = true;//标识正在翻页
        //  总的偏移量：offset
        var offset = 0;
        // 计算offset
        if (typeof flag === "boolean") {
            offset = flag ? -$wrapper.width() : $wrapper.width();
        } else {
            offset = -(flag - index) * $wrapperWidth;
        }
        // 单元移动的偏移量
        var itemOffset = offset / (TIME / ITEM_TIME);
        // 得到当前的left值
        var currLeft = $banner.position().left;
        // 得到目标的left值
        var targetLeft = currLeft + offset;
        // 开启定时器
        var timer = setInterval(function () {
            currLeft += itemOffset;
            // 如果到达目标位置
            if (Math.round(currLeft) === Math.round(targetLeft)) {
                clearInterval(timer);
                move =false;//标识不再翻页
                /**
                 * 循环翻页
                 */
                // 如果轮播到最后一张图片(1.jpg)，就跳转到最左边第二张图片(2.jpg)
                if (Math.round(currLeft) === Math.round(-($pointerLength + 1) * $wrapperWidth)) {
                    currLeft = Math.round(-$wrapperWidth);
                } else if (Math.round(currLeft) === 0) {
                    // 如果轮播到最左边图片(5.jpg)，就跳转到最右边第二张图片(5.jpg)
                    currLeft = Math.round(-$pointerLength * $wrapperWidth);
                }

            }
            $banner.css({
                left: currLeft
            });
        }, ITEM_TIME);

        // 更新导航圆点
        updatePointer(flag);
    }
});