小圆圈样式轮播图

1、给图片用弹性布局横着排列，给一个一张图片大小的边框，设置overflow：hidden之后就会只显示第一张图片，其他的隐藏

2、给小圆圈和图片设置坐标用于轮播 

 HTML样式：

<div class="box">

        <div class="banner">

            <img src="https://webstatic.mihoyo.com/upload/contentweb/2022/12/09/1804282cf13c44711cf07ef6d23156fb_2308532683745949632.jpg" alt="" class="bannerimg">

            <img src="https://webstatic.mihoyo.com/upload/contentweb/2022/12/09/43c38addf5ecb4e94980b0bf6e9a40fe_3160237405274247517.jpg" alt="" class="bannerimg">

            <img src="https://webstatic.mihoyo.com/upload/contentweb/2022/12/08/a884defa3ada37446df46760b4a43f5b_4073557566560568188.jpg" alt="" class="bannerimg">

            <img src="https://webstatic.mihoyo.com/upload/contentweb/2022/11/25/9548e975d80d6edf1ad652c32d07f6b8_4774122759834469945.jpg" alt="" class="bannerimg">

        </div>

        <div class="bannerbtn">

            <button class="btn bg"></button>

            <button class="btn"></button>

            <button class="btn"></button>

            <button class="btn"></button>

        </div>

CSS样式

.box{

        width: 640px;

        height: 400px;

        margin: auto;

        overflow: hidden;

    }

    .banner{

        width: 2560px;

        display: flex;

        position: relative;

    }

    .bannerimg{

        width: 640px;

        height: 400px;

    }

    .bannerbtn{

        position: absolute;

        left: calc(50% - 40px);

        top: 380px;

    }

    .btn{

        width: 20px;

        height: 20px;

        border-radius: 50%;

        cursor: pointer;

    }

    .bg{

        background-color: pink;

    }

JS样式

// 设置小圆圈事件

        var banner = document.querySelector('.banner')

        var btn = document.querySelectorAll('.btn')

        var lastindex = 0

        for(var i=0;i<btn.length;i++){

            // 1、添加小圆圈坐标setAttribute语法：element.setAttribute(attributename属性名称,attributevalue属性值)

            btn[i].setAttribute('index',i)

            // 2、小圆圈点击事件

            btn[i].onclick = function(){

                // 3、获取坐标

                var index = this.getAttribute('index')

                // 4、移动图片 

                banner.style.transform = `translateX(${-640*index}px)`

                // 5、改变小圆圈

                this.className = 'btn bg'

                // 6、清除第一个小圆圈样式

                btn[lastindex].className = 'btn'

                // 7、将当前的小圆圈坐标设置为上一个

                lastindex = index

            }

        }

        // 设置轮播

        var index = 0

        setInterval(function(){

            index ++

            if(index>3)index=0

            // 图片轮播

            banner.style.transform = `translateX(${-640*index}px)`

            // 小圆圈跟着

            btn[index].className = 'btn bg'

            btn[lastindex].className = 'btn'

            lastindex  = index

        },1000)