一、所用技术

JQuery、CSS、JavaScript

二、实现思路

1、img_ul类里面存放img标签，将需要展示的图片依次排开，在img_url中使用overflow:hidden的方式进行隐藏图片，每次只展示一张，通过控制img_url样式到外容器uls的距离来控制显示的图片。

2、无痕切换。在最后一张图片的后面拼上第一张图片，在第一张图片的后面拼上最后一张图片，以三张为例1.png、2.png、3.png，实际在页面中展示的是3.png、1.png、2.png、3.png、1.png，具体看下文代码。

当图片移动到最后一张的时候3.png，通过动画animate切换到下一张1.png，然后通过CSS样式瞬间切换到第一张1.png，达到无痕切换的效果，当图片移动到第一张的时候，原理相似，具体代码看后文代码。

三、效果图

image

四、注意事项

1、图片设置宽度是300px,可根据需要自己变动，这个在使用过程中多注意。

2、用户根据需要可在左右切换图片的地方添加防抖节流函数，防止用户持续点击。

五、具体代码

1、HTML代码

<div class="parent">
        <div class="uls">
            <!-- 图片位置 -->
            <ul class="img_ul">
                <img src="images/3.png" />
                <img src="images/1.png" />
                <img src="images/2.png" />
                <img src="images/3.png" />
                <img src="images/1.png" />
            </ul>

            <!-- 原点位置 -->
            <ul class='litCir_ul'></ul>
        </div>

        <!-- 左右切换按钮 -->
        <div class="buttons">
            <span class="left">&lt;</span>
            <span class="right">&gt;</span>
        </div>
    </div>

2、JS代码

    // 切换原点dom
    let dotDoms = ''
    let timer = undefined
    // 当前所在图片
    let currentPage = 1
    // 当前所在点
    let currentDot = 0
    // 点的数量总是比图片的数量少两个
    for (let index = 0; index < $('img').length - 2; index++) {
        dotDoms += "<span class='dot' data-page=" + index + "></span>"
    }
    $('.litCir_ul').html(dotDoms)
    // 第一个点是激活选中的状态
    $('.dot').eq(0).addClass('active-dot')
    // 鼠标移入的时候停止轮播图
    $('.parent').mouseenter(function () {
        clearInterval(timer)
    })
    // 鼠标移出的时候开始轮播
    $('.parent').mouseleave(function () {
        autoPlay()
    })
    // 左侧按钮点击事件
    $('.left').click(function () {
        currentDot = currentDot === 0 ? $('img').length - 3 : --currentDot
        if (currentPage <= 1 || currentPage === $('img').length - 1) {
            currentPage = $('img').length - 1
            // 当切换到第一张图片时，先让图片动画左移，再让图片瞬间右移
            $('.img_ul').animate({
                'left': 0
            }, function () {
                $('.img_ul').css({
                    'left': --currentPage * -300
                })
            })
        } else {
            // 当不是第一张图片时，然图片动画右移
            $('.img_ul').animate({
                'left': --currentPage * -300
            })
        }
        renderDots()
    })
    // 右侧按钮点击事件
    $('.right').click(function () {
        currentDot = currentDot === $('img').length - 3 ? 0 : currentDot + 1
        if (currentPage >= $('img').length - 1) {
            currentPage = 1
        }
        $('.img_ul').animate({
            'left': ++currentPage * -300
        }, function () {
            if (currentPage === $('img').length - 1) {
                $('.img_ul').css({
                    'left': '-300px'
                })
            }
        })
        renderDots()
    })

    $('.dot').click(function (e) {
        currentPage = parseInt(e.currentTarget.dataset.page) + 1
        currentDot = parseInt(e.currentTarget.dataset.page)
        console.log(currentPage);
        $('.img_ul').animate({
            'left': (currentDot + 1) * -300
        })
        renderDots()
    })
    autoPlay()
    // 自动轮播
    function autoPlay() {
        timer = setInterval(function () {
            currentDot = currentDot === $('img').length - 3 ? 0 : currentDot + 1
            // 当图片移动到最后一张图片的时候，当前图片变为1
            if (currentPage >= $('img').length - 1) {
                currentPage = 1
            }
            $('.img_ul').animate({
                'left': ++currentPage * -300
            }, function () {
                // 图片移动到最后一张的时候，图片瞬移到第一张1.png
                if (currentPage === $('img').length - 1) {
                    $('.img_ul').css({
                        'left': '-300px'
                    })
                }
            })
            renderDots()
        }, 1000)
    }

    // 轮播圆点渲染
    function renderDots() {
        $('.dot').removeClass('active-dot')
        $('.dot').eq(currentDot).addClass('active-dot')
    }

3、CSS代码

    .parent {
        width: 300px;
        position: relative;
    }
    ul {
        margin: 0;
        padding: 0;
    }
    .uls {
        position: relative;
        width: 300px;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .img_ul {
        width: 1500px;
        position: relative;
        /* 展示图片 */
        left: -300px;
    }

    img {
        width: 300px;
        float: left;
    }

    .buttons {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .left {
        background: rgba(0, 0, 0, 0.3);
        position: absolute;
        left: 0;
        cursor: pointer;
    }

    .right {
        background: rgba(0, 0, 0, 0.3);
        position: absolute;
        right: 0;
        cursor: pointer;
    }

    .litCir_ul {
        position: absolute;
        text-align: center;
        bottom: 0;
        width: 100%;
    }

    .dot {
        background: white;
        display: inline-block;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        margin: 5px;
    }

    .active-dot {
        background: turquoise;
    }