<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{font-family: "Microsoft YaHei",serif;}
        body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;}
        ol,ul,li{margin: 0;padding: 0;list-style: none;}
        img{border: none}
        #wrap{
            margin: 50px auto;
            width: 660px;
            height: 500px;
        }
        #wrap .img{
            position: relative;
            width: 100%;
            height: 410px;
        }
        #wrap .img .list li{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #wrap .img .list li.show{
            display: block;
        }
        #wrap .img .list li img{
            text-align: center;
            width: 100%;
            height: 410px;
        }
        #wrap .img .dec{
            position: absolute;
            left: 0;
            width: 100%;
            height: 20px;
            color: #fff;
            line-height: 20px;
            text-align: center;
            font-size: 12px;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.5);
        }
        #wrap .img .desc1{
            top: 0;
        }
        #wrap .img .desc2{
            bottom: 0;
        }
        #wrap .img #btn div{
            position: absolute;
            top: 50%;
            width: 40px;
            height: 40px;
            margin-top: -20px;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,.5);
            color: #fff;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            font-weight: bolder;
            cursor: pointer;
        }
        #wrap .img #btn div.left{
            left: 0;
        }
        #wrap .img #btn div.right{
            right: 0;
        }
        #wrap .tab{
            width: 100%;
            height: 30px;
            margin-top: 20px;
            text-align: center;
        }
        #wrap .tab p{
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background-color: #999;
            font-size: 12px;
            cursor: pointer;
        }
        #wrap .tab p.active{
            background-color: #f60;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="img">
        <ul class="list">
            <li class="show"><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <li><img src="img/7.jpg" alt=""></li>
            <li><img src="img/8.jpg" alt=""></li>
        </ul>


        <p class="desc1 dec"><span>1</span>/5</p>
        <p class="desc2 dec">这是第一张图片</p>


        <div id="btn">
            <div class="left"> < </div>
            <div class="right"> > </div>
        </div>
    </div>
    <div class="tab">
        <p class="active">单边切换</p>
        <p>循环切换</p>
    </div>
</div>

<script>
    //获取元素
    let aBtn = document.getElementById('btn').getElementsByTagName('div'),
        aImg = document.querySelectorAll('#wrap .img .list li'),
        aDec = document.querySelectorAll('#wrap .img .dec'),
        aTab = document.querySelectorAll('#wrap .tab p'),
        oDec1 = aDec[0].getElementsByTagName('span')[0],
        oDec2 = aDec[1],
        length = aImg.length, //总的img长度
        index = 0; //定义一个变量名，让js知道我们当前显示的是哪一张
        arrText = [
            '这是第1张图片',
            '这是第2张图片',
            '这是第3张图片',
            '这是第4张图片',
            '这是第5张图片'
        ], //每个图片对应的文本描述
        bool = true, //用一个bool值，来表示tab的状态

    // 左按钮
    aBtn[0].onclick = function () {
        //alert('left')

        //let nowImg = aImg[index]; //这个变量表示当前显示的是哪个li
        //nowImg.className = ''; //把当前的li名字去掉,他就不显示了
        aImg[index].className = '';


        index --; //右边的按钮，点击切换下一张，对应的序号自增

        if(index<0){
            index = bool?0:length-1;
        }

        //let nextImg = aImg[index];  //这个变量表示下一个li
        //nextImg.className = 'show'; //给当前的li加上名字就显示了
        aImg[index].className = 'show';

        oDec1.innerHTML = index+1;//对应dec描述的变换
        oDec2.innerHTML = arrText[index];
    };

    // 右按钮
    aBtn[1].onclick = function () {
        //alert('right')

        //let nowImg = aImg[index]; //这个变量表示当前显示的是哪个li
        //nowImg.className = ''; //把当前的li名字去掉,他就不显示了
        aImg[index].className = '';


        index ++; //右边的按钮，点击切换下一张，对应的序号自增

        // 判断单边切换还是循环切换
        if(index>length-1){
            index = bool?length-1:0;
        }
        // if (index>length-1){
        //     if (bool){
        //         index = length-1;
        //     }else{
        //         index = 0;
        //     }
        // }

        // if (bool){
        //     if (index>length-1){
        //         index = length-1;
        //     }else{
        //         if (index>length-1){
        //             index = 0;
        //         }
        //     }
        // }

        //let nextImg = aImg[index];  //这个变量表示下一个li
        //nextImg.className = 'show'; //给当前的li加上名字就显示了
        aImg[index].className = 'show';

        oDec1.innerHTML = index+1;//对应dec描述的变换
        oDec2.innerHTML = arrText[index];
    };
    
    aTab[0].onclick = function () {
        aTab[0].className = 'active';
        aTab[1].className = '';
        bool = true;
    };
    aTab[1].onclick = function () {
        aTab[0].className = '';
        aTab[1].className = 'active';
        bool = false;
    }
</script>
</body>
</html>