<div class="banner">
    <ul class="imgList">
    <li><img src="1.png"/></li>
    <li><img src="2.jpg"/></li>
    <li><img src="3.jpg"/></li>
    <li><img src="4.jpg"/></li>
    </ul>
    <div class="circle">
    </div>
  </div>

*{
    padding: 0px;
    margin: 0px;
    }
    .banner{
     width: 600px;
     margin: auto;
     border: 10px solid green;
     height: 350px;
     position: relative;
    overflow: hidden;
    position: relative;
    }
    .imgList img{
    width: 600px;
    height: 350px;
    }
    .imgList{
    /* 绝对定位 */
     position: absolute;
    }
    .imgList li{
    float:left;
    margin-right: 20px;
     list-style: none;

.circle{position: absolute;bottom: 15px;left:50%;transform: translateX(-50%);}
  .circle a{
     width: 15px;
     height: 15px;
     background: green;
     display: block;
     border-radius: 50%;
     opacity: .8;
     float: left;
     margin-right: 10px;
    }
    .circle a.hover{
    background: black;
     opacity: .7;
    }
          ul {
    transition-duration: 0.3s;
    left: 0px; 
     }

// 确定ul的宽度 动态的创建小圆点
    var imgList = document.querySelector('.imgList');
    var circle = document.querySelector('.circle');
    var flag = true;
    //给ui标签设置宽度
    imgList.style.width =imgList.children.length*620+'px';
    //下面动态创建a标签
    for (var i = 0; i < imgList.children.length; i++) {
      var aNode = document.createElement('a');
    //我们在这里创建index属性来记录索引值
    aNode.setAttribute('index',i);
    circle.appendChild(aNode);
    }

circle.addEventListener('click',function(e){
                var cirCle = e.target.getAttribute('index');
                if(e.target.nodeName=='A'){
                        imgList.style.left = cirCle*-620+'px';
                for(j=0;j<circle.children.length;j++){
                    circle.children[j].className='';
                }this.children[cirCle].className='hover';
            }
            })

var i = 1;
                setInterval(function(){
                 if(i<=3){
                    circle.children[i].click();
                    i++;
                 }else{
                    i=0;
                    circle.children[0].click();
                    i++;
                 }
                },2000)