JS制作图片切换

<!DOCTYPE html>
<html>
<head>
    <title>纯JS制作简单的图片切换</title>
    <meta charset="utf-8">
    <!-- <link rel="stylesheet" href="css/reset.css"> -->
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        #row{
            position:relative;
            width:500px;
            height:350px;
            /*background-color:pink;*/
            margin:50px auto;
        }
        #row #btn{
            display:flex;
            width:100%;
            height:50px;
            /*background-color:#484a19;*/
        }
        #row #btn span{
            width:80px;
            height:50px;
            margin-right:5px;
            background-color:#010000;
            line-height:50px;
            text-align:center;
            color:#fff;
            cursor:pointer;
        }
        #row #btn span.active{
            background-color:#f60;
        }
        #nav{
            position:relative;
            width:500px;
            height:300px;
            /*background-color:#fab000;*/
        }
        #nav .pic{
            position:relative;
            width:100%;
            height:100%;
        }
        #nav .pic img{
            position:absolute;
            display:none;
            top:0;
            left:0;
            width:100%;
            height:100%;
        }
        #nav .pic img.out{
            display:block;
        }
        #row #nav p{
            position:absolute;
            height:25px;
            background-color:rgba(0,0,0,.5);
            line-height:25px;
            text-align:center;
            color:#fff;
            font-size:12px;
        }
        #row #nav p.top{
            top:0;
            width:100%;
        }
        #row #nav p.bottom{
            bottom:0;
            width:100%;
        }
        #row #nav p.left{
            top:50%;
            left:0;
            cursor:pointer;
        }
        #row #nav p.right{
            top:50%;
            right:0;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id='row'>
        <div id='btn'>
            <span class='active'>循环切换</span>
            <span>单边切换</span>
        </div>
        <div id='nav'>
            <div class='pic'>
                <img src="data:images/k1.jpg" class='out'>
                <img src="data:images/k2.jpg">
                <img src="data:images/k3.jpg">
                <img src="data:images/k4.jpg">
                <img src="data:images/k5.jpg">
                <img src="data:images/k6.jpg">
            </div>
            <p class='top'><span>1</span>/6</p>
            <p class='bottom'>第<span>一</span>张图片</p>
            <p class='left click'>上一张</p>
            <p class='right click'>下一张</p>
        </div>
    </div>
</body>
<script>
    var tab = document.querySelectorAll("#row #btn span"),
        imgs = document.querySelectorAll("#row #nav .pic img"),
        right = document.querySelector("#row #nav p.right"),
        left = document.querySelector("#row #nav p.left"),
        oTop = document.querySelector("#row #nav .top span"),
        oBottom = document.querySelector("#row #nav .bottom span"),
        arr = ["一","二","三","四","五","六"],//底部文字数组
        flag = true;//标记,当前处于哪个模式(循环/单边)
        index = 0;//下标

    tab[0].onclick = function(){
        this.className = 'active';
        tab[1].className = '';
        flag = true;
    }
    tab[1].onclick = function(){
        this.className = 'active';
        tab[0].className = '';
        flag = false;
    }
    right.tabs = true;//自定义属性
    right.onclick = tabImg;

    left.tabs = false;//自定义属性
    left.onclick = tabImg;
    /*function(){
        imgs[index].className = '';//清空原来的class
        index--;
        if(index < 0){
            index = 5;
        }
        imgs[index].className = 'out';//给下一个img元素赋class值
        oTop.innerHTML = index + 1;//顶部数字变化
        oBottom.innerHTML = arr[index];//底部文字变化
    }*/

    function tabImg(){
        imgs[index].className = '';
        if(this.tabs){//当点击上一张或者下一张时,判断boolean是否为真,如果是假执行else语句
            index++;
            if(index > 5){
                if(flag){//如果是真,index值为0
                    index = 0;
                }else{
                    index--;//阻止index++
                    alert("已经是最后一张图片!");
                }
            }
        }else{
            index--;
            if(index < 0){
                if(flag){
                    index = 5;
                }else{
                    index++;//阻止index--
                    alert("已经是第一张图片不能在切换了!")
                }
            }
        }
        imgs[index].className = 'out';//给下一个img元素赋class值
        oTop.innerHTML = index + 1;//顶部数字变化
        oBottom.innerHTML = arr[index];//底部文字变化
    }
</script>
</html>