原生js 实现图片轮播（图片按钮+左右轮播）

该代码可以实现左右箭头点击切换，按钮点击切换，自动播放方面还需改进
点击切换方面算是实现了效果，自我感觉还需要改进，代码仅供参考

html部分

    
    
    




    
    

        

        

        

        

    
    

    
    

        
         
         
         
    
    
    
    

        <
        >
    

    

CSS部分

/*public CSS*/
*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
img{
    border:none;
}
/*public CSS end*/

.picShow{
    width: 100%;
    height: 100%;
    margin: auto;
    background: #ddd;
    overflow: hidden; /* 内容超出隐藏 */
    position: relative; /* 相对定位 */
}

.picUl{
    /*width:9999px;*/
    height: 500px;
    transition:all 0.5s;  /* 过渡动画 */
}
.picUl > li{
    /*float: left;*/
    width: 1200px;
    height: 100%;
    filter: opacity(1);
    overflow: hidden; /* 内容超出隐藏 */
    position: absolute;  /*绝对定位，相互覆盖*/
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    display: none;  /* 隐藏标签 */
}
.picUl > .showLi{
    display: block;
    /* 显示的时候才出现动画 */
    animation: myAni  0.5s  both;
}
@keyframes  myAni {
    0%{
        opacity: 0;

    }
    100%{
        opacity: 1;
    }
}



.dots{
    height: 89px;
    right:38px;
    bottom:35px;
    position: absolute;
}
.dots  span{
    display: inline-block;  /* 行内块。宽高有效 */
    width: 81px;
    height: 81px;
    margin-right: 18px;
    overflow: hidden;
    border: transparent solid 4px;
    cursor: pointer;  /* 指向的手势 */
}
.dots  .on{
    border: white solid 4px;
    border-radius: 4px;
}

.arrows{
    width:1400px;position: absolute;top:50%;margin-top: -60px;left: 50%;margin-left: -700px;/*opacity: 0;*/}
.arrows_left,.arrows_right{cursor: pointer;font-size: 100px; color: white;}
.arrows_right{float: right;}
.arrows_left{float: left;}

JS部分

{
    let findSiblings = function( tag ){
        let parent = tag.parentNode;
        let  childs = parent.children;
        let sb = [];  // 用来存储找到的兄弟们。
        for( let i = 0 ; i <= childs.length-1; i++){
            if( childs[i] !== tag ){
                sb[ sb.length ] = childs[i];
            }
        }
        return sb;
    };


    let arrows_left = document.getElementById("arrows_left");
    let arrows_right = document.getElementById("arrows_right");
    let picShow = document.getElementById("picShow");
    let arrows = document.getElementById("arrows");

    let lunboFun = function(d,p){
        let dots = document.getElementById(d);
        let picUl = document.getElementById(p);
        let spans = dots.children;
        let lis = picUl.children ;

        let t=0;
        lis[t].className = "showLi";//初始化第一张图片
        spans[t].className ="on";//初始化第一张按钮图片

       /* /!*自动播放*!/
        let show = function(){
            t++;
            if (t>3)
            {
                t=0;
            }
            lis[t].className = "showLi";
            let liXd = findSiblings( lis[t] );
            for(let k = 0 ; k <=liXd.length-1 ; k++){
                liXd[k].className = "";
            }

            spans[t].className = "on";
            let xd = findSiblings( spans[t] );
            for(let j = 0 ; j <=xd.length-1 ; j++){
                xd[j].className = "";
            }
        };
        let a = setInterval(function () {
            show();
        },1000);
        picShow.addEventListener("mouseenter",function () {
            arrows.style.opacity = 1;
            clearInterval(a)
        });
        picShow.addEventListener("mouseleave",function () {
            arrows.style.opacity = 0;
            a = setInterval(function () {
                show();
            },1000);
        });
        /!*自动播放 end*!/*/
        let picFun = function(a){//公共部分用函数封装起来
            lis[a].className = "showLi";
            let liXd = findSiblings( lis[a] );
            for(let k = 0 ; k <=liXd.length-1 ; k++){
                liXd[k].className = "";
            }

            spans[a].className = "on";
            let xd = findSiblings( spans[a] );
            for(let j = 0 ; j <=xd.length-1 ; j++){
                xd[j].className = "";
            }
        }

        let lr =function(a){//左右点击函数
            //右
            arrows_right.addEventListener("click", function () {
                a++;
                if (a>3)
                {
                    a=0;
                }
                picFun(a)
            });
            //左
            arrows_left.addEventListener("click", function () {
                a--;
                if (a<0)
                {
                    a=3;
                }
                picFun(a)
            });
        };
        lr(t);//在外面调用左右点击函数

        for(let i=0 ; i <= spans.length-1 ; i++){//图片点击按钮
            spans[i].addEventListener("click",function(){
                console.info( i );  // 索引

                lr(i);//点击图片后调用左右点击函数

                lis[i].className = "showLi";
                let liXd = findSiblings( lis[i] );
                for(let k = 0 ; k <=liXd.length-1 ; k++){
                    liXd[k].className = "";
                }

                this.className = "on";
                let xd = findSiblings( this );
                for(let j = 0 ; j <=xd.length-1 ; j++){
                    xd[j].className = "";
                }
                console.info( xd );
            });
        }
    };
    lunboFun("dots","picUl");

}