<!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{
            position: relative;
            margin: 50px auto;
            width: 820px;
            height: 390px;
            user-select: none;
        }
        #img{
            position: relative;
            width: 100%;
            height: 340px;
        }
        #img ul{
            width: 100%;
            height: 100%;
        }
        #img li{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #img li.show{
            display: block;
        }
        #tab{
            overflow: hidden;
            width: 100%;
            height: 50px;
        }
        #tab ul{
            width: 200%;
            height: 100%;
        }
        #tab li{
            float: left;
            width: 10%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #000;
            font-size: 12px;
            color: #eeeeee;
            cursor: pointer;
        }
        #tab li.active{
            background-color: #303030;
            color: #e9c06c;
        }
        #arrow div{
            position: absolute;
            top: 50%;
            width: 40px;
            height: 60px;
            margin-top: -30px;
            line-height: 60px;
            text-align: center;
            font-size: 12px;
            background-color: #000;
            color: #fff;
            cursor: pointer;
        }
        #arrow div.left{
            left: 0;
        }
        #arrow div.right{
            right: 0;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="img">
        <ul>
            <li class="show"><a href=""><img src="../14作业案例/img/1.jpg" alt=""></a></li>
            <li><a href=""><img src="../14作业案例/img/2.jpg" alt=""></a></li>
            <li><a href=""><img src="../14作业案例/img/3.jpg" alt=""></a></li>
            <li><a href=""><img src="../14作业案例/img/4.jpg" alt=""></a></li>
            <li><a href=""><img src="../14作业案例/img/5.jpg" alt=""></a></li>
        </ul>
    </div>
    <div id="tab">
        <ul>
            <li class="active">qwer</li>
            <li>qwer</li>
            <li>qwer</li>
            <li>qwer</li>
            <li>qwer</li>
        </ul>
    </div>

    <div id="arrow">
        <div class="left"> < </div>
        <div class="right"> > </div>
    </div>

</div>
<script>
    let aTabLi = document.querySelectorAll('#tab ul li'),
        aImgLi = document.querySelectorAll('#img ul li'),
        aArrow = document.querySelectorAll('#arrow div'),
        len = aTabLi.length;

    let goudan = 0;//定义变量，用来表示当前显示的是哪张图片

    function change(x) {
        aTabLi[goudan].className = "";
        aImgLi[goudan].className = "";

        goudan = x;

        // 当前点击的tab样式添加
        aTabLi[goudan].className = "active";
        aImgLi[goudan].className = "show";
    }


    // 给Tab对应的li添加点击事件
    for (let i=0;i<len;i++){
        aTabLi[i].onclick = function () {

            if (goudan===i)return;

            change(i);

        };
    }

    // 左箭头的点击事件
    aArrow[0].onclick = function(){
        let x = goudan;
        x --;
        if (x<0){x=len-1}
        change(x)
    };
    // 右箭头的点击事件
    aArrow[1].onclick = function () {
        let x = goudan;
        x++;
        if (x>=len){
            x=0
        }
        change(x)
    }
</script>
</body>
</html>