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

Luminous116 2018-03-31 10:04:11

如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 = "";

        };

    }

...全文

316 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

MY128 2018-04-01

打赏
举报

<!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 class="dian act"></div>
<div class="dian"></div>
<div class="dian"></div>
</div>

<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>

天际的海浪 2018-03-31

打赏
举报


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