html

<div class="top">
        <ul id="imgList">
            <!-- <li class="lunbo_img01"><img src="/images/19.jpg" alt=""></li>
            <li class="lunbo_img02"><img src="/images/3a.png" alt=""></li>
            <li class="lunbo_img03"><img src="/images/hist_img.jpg" alt=""></li> -->
            <li class="lunbo_img01" index="1"></li>
            <li class="lunbo_img02" index="2"></li>
            <li class="lunbo_img03" index="3"></li>
        </ul>
        <div id="navId" class="pointer">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
        </div>
        <a href="#" rel="external nofollow" rel="external nofollow" class="arrow01 icon-arrow-right">></a>
        <a href="#" rel="external nofollow" rel="external nofollow" class="arrow01 icon-arrow-left"><</a>
    </div>

css

.top {
    width: 100%;
    height: 588px;
    position: relative;
    overflow: hidden;
}
#imgList {
    position: absolute;
    width: 7137px;
}
top #imgList li {
    float: left;
    width: 2379px;
    height: 580px;
    list-style: none;
}
.top .lunbo_img01 {
    background: url("/images/19.jpg") no-repeat center;
    background-size: cover;
}

.top .lunbo_img02 {
    background: url("/images/hist_img.jpg") no-repeat center;
    background-size: cover;
}

.top .lunbo_img03 {
    background: url("/images/3a.png") no-repeat center;
    background-size: cover;
}
.pointer {
    position: absolute;
    width: 436px;
    bottom: 30px;
    left: 1000px;
}
.arrow01 {
    position: absolute;
    text-decoration: none;
    width: 40px;
    height: 40px;
    background: #727d8f;
    color: #fff;
    font-weight: bold;
    line-height: 40px;
    text-align: center;
    top: 180px;
}
.icon-arrow-left {
    left: 0;
}

.icon-arrow-right {
    right: 0;
}

js

$(function() {
    // 轮播图
    var imgCount = 3; //图片个数
    var index = 1; //图片序号
    var intervalId; //定时器
    var buttonSpan = $('.pointer').children(); //集合（小圆点）
    var _index; //小圆点的索引

    //自动轮播功能，使用定时器
    autoNextPage();
    function autoNextPage() {
        intervalId = setInterval(function() {
            nextPage(true);
            play();
        }, 3000);
    }

    //轮播主要逻辑
    function nextPage(next) {
        var targetLeft = 0;
        //当前的原点去掉on样式
        $(buttonSpan[index - 1]).removeClass('on');
        if (next) { //往后走
            if (index == 3) { //到最后一张，直接跳到第一张
                targetLeft = 0;
                index = 1;
                console.log("bbbb");
            } else {
                index++;
                console.log("后");
                targetLeft = -2379 * (index - 1);
            }
            console.log(buttonSpan.attr("index"));
            // play();
        } else { //往前走
            if (index == 1) { //在第一张，直接跳到第三张(前一张)
                index = 3;
                targetLeft = -2379 * (imgCount - 1);
                console.log("qian");
            } else {
                index--;
                targetLeft = -2379 * (index - 1);
                console.log("lalal");
            }
            play();
        }
        //改变图片容器的位置
        $('#imgList').animate({ left: targetLeft + 'px' });

        //更新后的原点加上样式
        $(buttonSpan[index - 1]).addClass('on');
    }

    //当鼠标移入，停止轮播
    $('.top').mouseover(
        function() {
            console.log('停止了！');
            clearInterval(intervalId);
        });
    //当鼠标移出，开始轮播
    $('.top').mouseout(
        function() {
            console.log('开始了！');
            autoNextPage();
        });
    //单击哪一个小圆点，就跳到哪一张  //事件委托
    clickButtons();
    // buttonSpan[index - 1].click(function() {
    //     targetLeft = -2379 * (index - 1);
    // });
    function clickButtons() {
        var length = buttonSpan.length;


        for (var i = 0; i < length; i++) {
            buttonSpan[i].onclick = function() {
                $(buttonSpan[index - 1]).removeClass('on');
                if ($(this).attr('index') == 1) {
                    index = 3;
                } else {
                    index = $(this).attr('index') - 1;
                }
                nextPage(true);
            }
        }
    }
    function play() {
        //改变little dot的样式
        $('.pointer').children('span').eq(_index).addClass("on").siblings().removeClass("on");
        $('#imgList').children('li').eq(_index).fadeIn().siblings().fadeOut(); //淡入淡出
    }
    //点击下一页、上一页的功能
    $('.icon-arrow-left').click(function() {
       nextPage(false);
    });
    $('.icon-arrow-right').click(function() {
        nextPage(true);
    });

});

实现思路：

参考：https://www.jb51.net/article/145772.htm

\