原生js轮播图带注释

代码部分：

HTML部分：

<div class="wrap">
        <ul>
            <li class="active" style="background-color:red;">一</li>
            <li style="background-color:skyblue;">二</li>
            <li style="background-color:blue;">三</li>
            <li style="background-color:green;">四</li>
            <li style="background-color:purple;">五</li>
        </ul>
        <div class="intro t-num"><span>1</span>/5</div>
        <div class="intro b-title">白少在双拥广场玩耍</div>
        <div class="arrow a-left">&lt;</div>
        <div class="arrow a-right">&gt;</div>
</div>
<div class="btn">
    <button>正常模式</button>
    <button class="active">循环模式</button>
</div>

CSS部分：

body,ul{margin: 0;padding:0}
li{list-style: none}
button:focus{outline: 0}
.wrap,.btn{
    position: relative;
    width:600px;
    height: 335px;
    margin: 35px auto
}
.btn{ height: 65px; text-align: center;}
.wrap>ul>li{
    position: absolute;
    display: none;
    width:100%;
    height:100%;
    color:#fff;
    text-align:center;
    line-height:335px;
    font-size:48px;
}
.wrap>ul>li.active{ display: block;}
.arrow{
    position: absolute;
    width: 25px;
    height: 50px;
    top:50%;
    margin-top: -25px;
    color:#fff;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    background-color: rgba(51,136,125,.5);
}
.arrow:hover{ background-color: rgba(51,136,125,.9);}
.a-left{ left: 0;}
.a-right{right: 0;}
.intro{
    position: absolute;
    width: 100%;
    height: 38px;
    line-height: 38px;
    font-size:16px;
    color:#fff;
    text-align: center;
    background-color: rgba(0,0,0,.6);
}
.t-num{ top: 0;}
.b-title{ bottom: 0;}
.btn>button{
    width: 100px;
    height: 38px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    background-color: MediumVioletRed;
    border:solid 1px #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    margin: 15px;
    cursor: pointer;
}
.btn>button.active{background-color: orange}
.btn>button:hover{background-color: #935404}

JS部分：

//get the object
    var oLi = document.getElementsByTagName("li"),                         //获取图片
        leftArrow = document.getElementsByClassName("a-left")[0],          //获取左边按钮
        rightArrow = document.getElementsByClassName("a-right")[0],       //获取右边按钮
        topBar = document.querySelector(".t-num span"),                //显示顶部数字用
        btmBar = document.getElementsByClassName("b-title")[0],              //显示底部简介用
        btns = document.getElementsByTagName("button"),                    //获取正常播放和循环播放两个按钮
        arrTitle = ["白少在双拥广场玩耍","白少在研究口红","白少在五岳独尊静坐","恩，是男神，没错儿","少爷在卖萌^_^"], //用数组按顺序存储标题
        len = oLi.length,                                                  //用来获取图片的张数
        index = 0,                                                        //用来存储当前图片的索引值
        mark = true;                                                      //用来标记是单边播放还是循环播放，这里默认true为循环播放；false则为正常播放模式

        //正常播放按钮事件
        btns[0].onclick = function () {
            this.className = 'active';
            btns[1].className = "";
            mark = false ;
        }
        //循环播放按钮事件
        btns[1].onclick = function () {
            this.className = 'active';
            btns[0].className = "";
            mark = true ;
        }

        leftArrow.onclick = fn;
        rightArrow.onclick = fn;

        //通过自定义属性来标记是否是点击上一张图片
        leftArrow.isPrev = true;
        rightArrow.isPrev = false ;
        function fn() {
            oLi[index].className = '';  //隐藏当前图片
            if(this.isPrev){  //如果为true，则是点击上一张图片
                index--;  //序号自减，到上一张的索引值
                if(mark){  // 如果是循环播放
                    if(index<0){
                        index = len-1;
                    }
                }else {   //如果是单边播放
                    if(index<0){
                        index = 0;
                        alert("前边没有了")
                    }
                }
            }else {  //否则的话，是点击下一张图片
                index++;  //序号自减，到上一张的索引值
                if(mark){  // 如果是循环播放
                    if(index>len-1){
                        index = 0;
                    }
                }else {   //如果是单边播放
                    if(index>len-1){
                        index = len-1;
                        alert("后边边没有了")
                    }
                }
            }
            oLi[index].className = 'active';
            topBar.innerHTML = index + 1;
            btmBar.innerHTML = arrTitle[index];
        }