仿小米网站在做小圆点切换动画时出现的问题


如GIF所示，在点击其中一个小圆点后迅速移到另外几个上，会发生几个圆点同时被点亮的BUG，求大神解释一下原因
应该怎么修改代码
HTML代码
<div class = "home container">
        <div class="rollimages" id = "imgs">
            <a href=""><img src="images/rollImages/1.jpg" alt="" id = "img1" style = "opacity: 1;"></a>
            <a href=""><img src="images/rollImages/2.jpg" alt="" id = "img2"></a>
            <a href=""><img src="images/rollImages/3.jpg" alt="" id = "img3"></a>
            <a href=""><img src="images/rollImages/4.jpg" alt="" id = "img4"></a>
            <a href=""><img src="images/rollImages/5.jpg" alt="" id = "img5"></a>
            <div class="cut">
                <a class = "left" id = "lastImg"></a>
                <a class = "right" id = "nextImg"></a>
            </div>            <!--小圆点-->
            <div class="circle">
                <ul id = "circles">
                    <li class = "active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>        </div>
JS代码
var circles = $("circles").children;
    console.log(circles.length);
    for(var m = 0; m < circles.length; m ++) {
        circles[m].index = m;
        circles[m].onclick = function() {
            for(var x = 0; x < circles.length; x ++) {
                circles[x].className = "";
            }
            this.className = "active";
            this.onmouseout = null;
            findImg:for(var n = 0; n < imgs.length; n ++) {
                if(imgs[n].children[0].style.opacity === "1") {
                    imgs[n].children[0].style.opacity = "0";
                    imgs[this.index].children[0].style.opacity = "1";
                    break findImg;
                }
            }
        };
        circles[m].onmouseover = function() {
            this.className = "active";
        };
        circles[m].onmouseout = function() {
            this.className = "";
        };
    }

解决方案 »

  1.   


            circles[m].onmouseover = function() {
                for(var x = 0; x < circles.length; x ++) {
                    circles[x].className = "";
                }
                this.className = "active";
            };
      

  2.   


    <!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>
            .dian{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #333;
                float: left;
                margin-left: 5px;
            }
            .act{
                background: #ff0;
            }
        </style>
    </head>
    <body>
        <div class="diangroup">
            <!-- div做出三个小圆点，默认第一个被选中 -->
            <div class="dian act"></div>
            <div class="dian"></div>
            <div class="dian"></div>
        </div>
        <!-- 引用jquery -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $('.dian').click(function (e) { //圆点点击事件
                $(e.target).addClass('act');//被点圆点添加act样式
                $(e.target).siblings().removeClass('act');//同辈圆点去掉act样式
            });
        </script>
    </body>
    </html>