HTML 排他思想

一.应用场景：轮播图下方的小圆点

二.步骤：

1.建立一个无序列表

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

2.给无序列表添加样式

    <style>
        li{
            width: 30px;
            height: 30px;
            list-style: none;
            border: 1px solid darkslategrey;
            background-color: darkslategrey;
            border-radius: 50%;
            float: left;
            margin-left: 10px;
        }


    </style>

3.获取所有圆点的下标

        //获取所有小园点
        var list=document.querySelectorAll('li');

4使用双重for循环遍历圆点下标，保存自己，清除其他

    <script>
        //获取所有小园点
        var list=document.querySelectorAll('li');

        for (var i = 0; i < list.length; i++) {
            //鼠标经过小圆点事件
            list[i].onmouseover=function(){
                //变背景颜色，排除其他颜色
                for (var j = 0; j < list.length; j++) {
                    list[j].style.backgroundColor='';
                    
                }
                //保留自己的颜色
                this.style.backgroundColor='red';
            }
            list[i].onmouseleave=function(){
                this.style.backgroundColor='';
            }
            
        }
    </script>

5.效果图