Dom应用(三)——基础轮播图需求：点击下标会切换图片左右按钮也会切换，到最后一个图片的时候会返回到第一个图片步骤设置一

需求：

点击下标会切换图片
左右按钮也会切换，到最后一个图片的时候会返回到第一个图片

步骤

设置一个container 包含图片swiper,下标pointer
利用伪元素方法为左右按钮添加内容
js 给li绑定点击事件
给左右按钮绑定点击事件(注意tag++, tag--)
还需要判定一下左右点击是否越界
多次使用的代码可以封装成函数

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
    }
    body{
        height: 3000px;
    }
    #container{
        height: 280px;
        width: 520px;
        margin: 100px auto;
        position: relative;
       
    }
    #container>#picture{
        height:100%;
        width: 100%;
    }
    #picture>img{
        height: 100%;
        width: 100%;
        float: left;
        display: none;
    }
    #picture>.active{
        display: block;
    }
    #container>#pointer{
        height: 20px;
        width:150px;
        
     
    }
    #pointer>li{
        background: rgba(0, 0, 0, 0.5);
        color: white;
        height: 100%;
        width:20px;
        list-style: none;
        float: left;
        text-align: center;
        line-height: 20px;
        position: relative;
        margin-right:5px;
        bottom: 30px;
        right:-360px;
        
    }
    #pointer> .show{
        background: red;
    }
    #right,
    #left{
        display: inline-block;
        height: 50px;
        width: 50px;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 50%;
        
    }
    #right{
       right: 0px;
    }
    #left{
        left: 0px;
    }
    #left::after{
        content: "";
        display:inline-block;
        height: 20px;
        width: 20px;
        border-left:5px solid white ;
        border-bottom:5px solid white ;
        transform: rotate(45deg);
        position: absolute;
        right:6px;
        top: 12px;
    }
    #right::after{
        content: "";
        display: inline-block;
        height: 20px;
        width: 20px;
        border-right:5px solid white;
        border-bottom: 5px solid white;
        transform: rotate(-45deg);
        position: absolute;
        top: 12px;
        left: 6px;
    }
    </style>
</head>
<body>
    <div id="container">
        <div id="picture">
            <img src="https://img.alicdn.com/tfs/TB1wQANr7Y2gK0jSZFgXXc5OFXa-1130-500.jpg_q100.jpg_.webp" alt="" class = "active">
            <img src="https://img.alicdn.com/simba/img/TB1nOBCnSf2gK0jSZFPSutsopXa.jpg" alt="">
            <img src="https://img.alicdn.com/tfs/TB1vbTkna61gK0jSZFlXXXDKFXa-520-280.jpg_q90_.webp" alt="">
            <img src="https://img.alicdn.com/simba/img/TB1CHOYn4D1gK0jSZFsSuvldVXa.jpg" alt="">
            <img src="https://img.alicdn.com/tfs/TB170_fnoD1gK0jSZFGXXbd3FXa-520-280.jpg_q90_.webp" alt="">
        </div>
        <ul id="pointer">
            <li class="show">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <sapn id = "left"></sapn>
        <sapn id = "right"></sapn>
    </div>
    <script>
    var oCon = document.getElementById("container")
    var oPic = document.getElementById("picture")
    var oImg = oPic.getElementsByTagName("img")
    var ali = document.getElementsByTagName("li")
    var oRight = document.getElementById("right")
    var oLeft = document.getElementById("left")


    var tag = 0

    // 给li绑定点击事件
    for(var i = 0;i < ali.length;i++){
        ali[i].index = i;
       ali[i].onclick = function(){
           for(var j = 0;j<ali.length;j++){
               ali[j].className = "";
               oImg[j].className = "";
            //    点击时给所有元素去掉样式
           }
           ali[this.index].className = "show"
           oImg[this.index].className = "active"
           //  给当前点击元素设置样式    
       }
    }

    //给右侧按钮绑定点击事件
    oRight.onclick = function(){
        tag++;
        if (tag > ali.length){
            tag = 0
        }
        changeslider()
    } 
    oLeft.onclick = function(){
        tag--;
        if(tag < 0){
            tag = ali.length - 1
        }
        changeslider();
        
        }
    
    //将设置样式的代码抽出成一个函数
    function changeslider(){
        for(var i = 0;i<ali.length;i++){
            ali[i].className = "";
            oImg[i].className = "";

        }
        ali[tag].className = "show"
        oImg[tag].className = "active"
    }
    </script>
    
</body>
</html>

效果如下