【css】实现走马灯

.container{width:200px;background-color:rgb(54, 77, 121);padding:0 20px;}.box{width:100px;height:100px;margin:0 auto;overflow:hidden;}.list{width:100px;line-height:100px;text-align:center;color:#fff;f

richest_qi

851人浏览 · 2020-08-02 18:25:11

richest_qi · 2020-08-02 18:25:11 发布

.container{
    width:200px;
    background-color:rgb(54, 77, 121);
    padding:0 20px;
}
.box{
    width:100px;height:100px;
    margin:0 auto;
    overflow:hidden;
}
.list{
    width:100px;line-height:100px;
    text-align:center;
    color:#fff;
    font-weight:bold;
    font-size:24px;
}
.link{
    margin:5px auto;
    text-align:center;
}
.link a{
    text-decoration: none;
    background-color:rgb(113, 130, 161);
    display:inline-block;
    width:10px;height:10px;
    border-radius:8px;
    border:3px solid transparent;
    background-clip:padding-box;
    text-indent:-999em;
}
.link a.active{
    background-color:#fff;
}

<body>
    <div class="container">
        <div class="box">
            <div class="list" id="one">1</div>
            <div class="list" id="two">2</div>
            <div class="list" id="three">3</div>
        </div>
        <div class="link">
            <a href="#one" class="active">one</a>
            <a href="#two">two</a>
            <a href="#three">three</a>
        </div>
    </div>
    <script>
        window.onload = function(){           
            const handleClick = e => {
               if(e.target.classList.contains('active')) {
                   return;
               }
               e.target.classList.add('active');
               Array.prototype.slice.call(e.currentTarget.children).forEach(el => {
                   if(el.href!==e.target.href) el.classList.remove('active');
               });
            }
            var link = document.querySelector('.link');
            link.onclick = handleClick;

        }
    </script>
</body>