JavaScript 轮播图点击小圆点切换 排他思想

简单的样式部分

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            display: flex;
        }
        li{
            width: 50px;
            height: 50px;
            list-style: none;
            border-radius: 50%;
            background-color: pink;
            margin: 10px;
        }
        li.active{
            background-color: red;
        }

</style>

HTML 部分

<ul>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

JavaScript部分

<script>
        // 获取所有的文档中li标签 
    var lis = [...document.querySelectorAll('li')]
        //遍历数组中的所有的li
    lis.forEach(function(val){
        //val 数组中的每个值 给所有的值绑定点击事件
        val.onclick = function(){
            //遍历数组中的所有的li
            lis.forEach(function(val_2){
                //清除所有的类名
                val_2.classList.remove('active')
                
            })
            //点击时给对应的标签添加类名
            this.classList.add('active')
        }
    })

</script>