js:

   // 得到元素

    var banner=document.getElementById('banner');

    var carousel_list = document.getElementById('carousel_list');

    var circle_ol = document.getElementById('circle_ol');

    var circle_lis = circle_ol.getElementsByTagName('li');

    // 当前正在显示的图片序号，从0开始

    var idx = 0;

    // 设置小圆点的current在谁身上，序号为idx的小圆点才有current类名，其他的li都没有类名

    function setCircles() {

        // 遍历，遍历0、1、2

        for (var i = 0; i <= 2; i++) {

            if (i == idx) {

                circle_lis[i].className = 'current';

            } else {

                circle_lis[i].className = '';

            }

         }

    }

     // 事件委托 ，小圆点的监听

     circle_ol.onclick = function (e) {

        if (e.target.tagName.toLowerCase() == 'li') {

            //得到li身上的data-n属性，就是n

            var n = Number(e.target.getAttribute('data-n'));

            //改变idx

            idx = n;

            //拉动

            carousel_list.style.transform = 'translateX(' + -33.33 * idx + '%)';

        setCircles();

        }

    }      

function autoplay(){

    idx++

    if(idx>2){

        idx=0

    }

    carousel_list.style.transform='translateX('+ -33.333*idx+'%)';

    setCircles();

}

var timer=setInterval(function(){

    autoplay()

},2000);

banner.onmouseenter=function(){

    clearInterval(timer)

}

banner.onmouseleave=function(){

    clearInterval(timer);

    var timer=setInterval(function(){

        autoplay()

    },2000);

}

h5:

<section class="banner" id="banner">

        <ul id="carousel_list" class="carousel_list">

            <li>

                <img src="./images/banner01.png" alt="">

            </li>

            <li>

                <img src="./images/banner02.png" alt="">

            </li>

            <li>

                <img src="./images/banner03.png" alt="">

            </li>

        </ul>

        <ol class="circles" id="circles_ol">

            <li data-n="0"></li>

            <li data-n="1"></li>

            <li data-n="2"></li>

        </ol>

    </section>

    <script src="./js/banner.js"></script>

css:

.banner{

    position: relative;

}

.banner .carousel_list {

    width: 300%;

    /* 清除浮动 */

    overflow: hidden;

    /* translateX中的百分数表示相对于它本身的宽度的多少倍 */

    /* transform: translateX(-16.66%); */

    transition:transform .5s ease 0s;

}

.banner .circles{

    width: 100px;

    height: 15px;

    position: absolute;

    bottom: 50px;

    left: 50%;

    margin-left: -20px;

    z-index: 9999;

}

.banner .circles li{

    float: left;

    width: 10px;

    height: 10px;

    margin-right: 10px;

    border-radius: 50%;

    transition: all .4s ease 0s;

    background-color:  #FFFFFF;;

}

.banner .circles li:last-child{

    margin-right: 0px;

}

.banner .circles li.current{

    width: 10px;

    background-color: #0058AA;

}

.banner .carousel_list li{

    width: 33.333%;

    float: left;

}

.banner .carousel_list li img{

    width: 100%;

    vertical-align: middle;

}