<!-- 指示符 -->
   <div class="btn">
       <span num="0" class="t_btn hover"></span>
       <span num="1" class="t_btn"></span>
       <span num="2" class="t_btn"></span>
   </div>
   <!-- 左右切换按钮 -->
   <div class="arr prve">
       <span class="sl_left"></span>
   </div>
   <div class="arr next">
       <span class="sl_right"></span>
   </div>
</div>

————————————————————————————————————

CSS：

.prve, .next { background: url(../photo/tubiao.png) no-repeat; }

/* banner */

div,ul,li,a,span,img { margin:0; padding:0; }

.banner { width:1920px; height:546px; position:relative; overflow: hidden; padding-top: 38px; }

.t_img { height: 536px; width: 1920px; overflow: hidden; }

.tab>img:not(:first-child) { display:none; }

.btn { height: 14px; width: 86px; margin-top: -30px; padding-left: 900px; z-index: 3; text-align: center; }

.btn span { width:14px; height:14px; display:inline-block; background-color:#b4b5b7; border-radius:50%; margin:0px 2px; cursor:pointer; }

.btn span.hover { background-color:#ffb23c; }

.arr { display: none; width: 46px; height: 81px; position: absolute; top: 50%; margin-top: -30px; z-index:999; }

.arr span { display: block; width: 46px; height: 81px; }

.sl_left { margin: 20px 0 0 10px; transform: rotate(45deg); }

.prve { background-position: -43px -140px; width:46px; height:81px; margin-left: 360px;}

.next { background-position: -185px -140px; width:46px; height:81px; margin-left: 1515px; }

.sl_right { margin: 20px 0 0 5px; transform: rotate(-135deg); }

.banner:hover .arr{ display:block; }
——————————————————————————

JS部分：

//轮播图
var curIndex=0;//初始化
var img_number = document.getElementsByClassName('t_img').length;
var _timer = setInterval(runFn,2000);//2秒
function runFn(){ //运行定时器        
   curIndex = ++curIndex == img_number ? 0 : curIndex;//算法 4为banner图片数量
   slideTo(curIndex);
}
//圆点点击切换轮播图
window.onload = function  () {    //为按钮初始化onclick事件
   var tbs = document.getElementsByClassName("t_btn");
   for(var i=0;i<tbs.length;i++){
       tbs[i].onclick = function  () {
           clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突
           slideTo(this.attributes['num'].value);
           curIndex = this.attributes['num'].value
           _timer = setInterval(runFn,2000);//点击事件处理完成，继续开启定时轮播
       }
   }
}
var prve = document.getElementsByClassName("prve");
prve[0].onclick = function () {//上一张
   clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突
   curIndex--;
   if(curIndex == -1){
       curIndex = img_number-1;
   }
   slideTo(curIndex);
   _timer = setInterval(runFn,2000);//点击事件处理完成，继续开启定时轮播
}
var next = document.getElementsByClassName("next");
next[0].onclick = function () {//下一张
   clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突
   curIndex++;
   if(curIndex == img_number){
       curIndex =0;
   }
   slideTo(curIndex);
   _timer = setInterval(runFn,2000);//点击事件处理完成，继续开启定时轮播
}
//切换banner图片 和 按钮样式
function slideTo(index){
   console.log(index)
   var index = parseInt(index);//转int类型
   var images = document.getElementsByClassName('t_img');
   for(var i=0;i<images.length;i++){//遍历每个图片
       if( i == index ){
           images[i].style.display = 'inline';//显示            
       }else{
           images[i].style.display = 'none';//隐藏
       }
   }
   var tabBtn = document.getElementsByClassName('t_btn');
   for(var j=0;j<tabBtn.length;j++){//遍历每个按钮
       if( j == index ){
           t_btn[j].classList.add("hover");    //添加轮播按钮hover样式
           curIndex=j;
       }else{
           t_btn[j].classList.remove("hover");//去除轮播按钮hover样式
       }
   }
}