HTML的Banner部分遇到问题，JS部分不懂怎么修改，请教一下各位大佬，如何修改能正常播放。

Question

HTML:

    <!-- 指示符 -->
    <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样式
        }
    } 
}

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

效果图：

html、css、js的代码都在上面，如图所示，一共三张轮播图轮换，可以正常轮播，但是第三张轮播结束会直接显示空白，并且下面圆点按钮会跑到上面去，如下图所示：

圆点按钮可进行点击切图，但是没有把所点击的圆点进行高亮显示，并且自动轮播的时候也没有按照图片顺序高亮显示，一直都是第一个圆点高亮。同时，左右切换图标点击没有效果。

请问大佬们，该如何进行修改？

Answer 1

建议使用swipper插件，自己写比较麻烦，好像显示三张图的话，实际上有5张图，好把前后衔接起来。看看swiper怎么实现的