js编写左右轮播图分页按钮

此按钮主要用于左右轮播图的翻页页码,话不多说,先看效果

点击按钮,修改按钮长度,达到翻页的效果
上代码

HTML结构

<div id="app">
    <div class="button active"></div>
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
</div>

CSS样式

<style>
        body {
            height: 100%;
            margin: 0;
            background-color: #E91E63;
        }

        #app {
            width: 180px;
            height: 20px;
            margin: 200px auto;
            
        }

        .button {
            width: 20px;
            height: 20px;
            float: left;
            margin-right: 20px;
            background-color: #fff;
            border-radius: 20px;
            cursor: pointer; 
            /* 过渡动画 */