By figure, a (complete code at the end)

01 Start by writing out the basic label layout,这里用父级divNested childrenul和div标签.ulis to store pictures,子级divIs the parent of the dot navigationdiv.代码如下：

<div class="banner">
        <ul class="imglist">
            <li><img src="./banner/1.png" alt=""></li>
            <li><img src="./banner/2.jpg" alt=""></li>
            <li><img src="./banner/3.jpg" alt=""></li>
            <li><img src="./banner/4.jpg" alt=""></li>
        </ul>
        <div class="cir"></div>
</div>

02 Make a basic layout,css代码如下：

The first step is to clear the possible inner and outer margins,然后进行布局

        *{
            padding: 0px;
            margin: 0px;
        }
        /* The style of the visible border */
        .banner{
            width: 600px;
            height: 350px;
            margin: auto;
            border: 10px solid #999;
            position: relative;
            overflow: hidden;
        }
        /* ul标签的样式 */
        .imglist{
            position: absolute;
        }
        li{
            list-style: none;
            margin-right: 10px;
            float: left;
        }
        img{
            width: 600px;
            height: 350px;
        }
        /* Dot navigation parentdiv标签的样式 */
        .cir{
            position: absolute;
            left: 50%;
            bottom: 15px;
            transform: translateX(-50%);
        }
        /* Dot navigation settings */
        .cir a{
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: green;
            margin-right: 10px;
            float: left;
        }
        /* Dot navigation post-click style */
        .cir a.hover{
            background-color: black;
            opacity: .5;
        }

03 编写javascript部分,First get the object,并定义变量

        var banner = document.querySelector('.banner');   //Get the visible border
        var imglist = document.querySelector(".imglist");  //获取ul标签
        var cir = document.querySelector('.cir');          //Get the dot navigation parentdiv
        var lis = imglist.children;                       //所有liThe labels are in a pseudo-array
        var thisindex = 0;
        var flag = true;

04 在上面的css样式中,ulLabels don't have a width set,Here, the number of pictures is used to get the width,And add dot navigation with the number of pictures.代码如下：

 //由图片widthand number of acquisitionsul的width
imglist.style.width = lis.length*610+'px';      //注意：01width是小写  02Don't forget to add units‘px’
            
 //Add dot navigation according to the number of pictures
 for (var i = 0; i < lis.length; i++) {
                var anode = document.createElement('a');    //创建<a></a>
                cir.appendChild(anode);                     //在父级div里面添加<a>
 }

05 Click event for dot navigation.The first line of code here is set for the effect of restoring dots after clicking,Explanations follow in the comments.

cir.children[0].classList.add('hover');     //The page must exist firsthover类
            //Create dot navigationanode和ulCorrespondence of pictures
            for(var i=0; i<lis.length; i++){
                cir.children[i].setAttribute('index',i);     //li添加自定义属性'index'
            }

            //Dot click event
            cirClick();
            function cirClick(){
                cir.addEventListener('click',function(e){
                    if(e.target.nodeName != 'A'){
                        return false;
                    }
                    if(flag){                       //节流阀
                        flag = false;
                        thisindex = e.target.getAttribute('index');
                        // imglist.style.left = -thisindex*610+'px';
                        move(imglist,-thisindex*610,function(){
                            flag = true;
                        })
                    
                        cir.querySelector('.hover').classList.remove('hover');    //Restores the original style after each click on the dot（from grey to green）
                        e.target.classList.add('hover');                            //Dot click style
                    }
                    
                })  
            }

05 缓动函数,Realize the movement of the picture of the carousel（由快到慢）.

            //缓动函数
            var num = 0;
            function move(box,target,callback){
                box.myTime = setInterval(function(){
                    var osleft = box.offsetLeft;     //这里是属性,不能加()
                    var num = (target-osleft) / 10;
                    num = num>0 ? Math.ceil(num):Math.floor(num);
                    if(osleft == target){
                        clearInterval(box.myTime);
                        callback && callback();
                    }else{
                        box.style.left = num+osleft+'px';
                    }
                },30)
            }     

08 Implement automatic playback of carousel images

            //自动轮播
            auto();
            function auto(){
                setInterval(function(){
                    if(flag){
                        flag = false;
                        if(thisindex == lis.length){
                            thisindex = 0;
                        }
                        move(imglist,-thisindex*610,function(){
                            flag = true;
                        })
                        cir.querySelector('.hover').classList.remove('hover');    //Restores the original style after each click on the dot（from grey to green）
                        cir.children[thisindex].classList.add('hover');
                        thisindex++;
                    }
                }, 2000);
            }

完整代码如下

in the complete code,After getting the object and defining the variable, put it allwindow.onload();函数中,Make the page load complete and then perform the carousel effect.

ps:If you have any questions, you can comment and we will reply.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        /* The style of the visible border */
        .banner{
            width: 600px;
            height: 350px;
            margin: auto;
            border: 10px solid #999;
            position: relative;
            overflow: hidden;
        }
        /* ul标签的样式 */
        .imglist{
            position: absolute;
        }
        li{
            list-style: none;
            margin-right: 10px;
            float: left;
        }
        img{
            width: 600px;
            height: 350px;
        }
        /* Dot navigation parentdiv标签的样式 */
        .cir{
            position: absolute;
            left: 50%;
            bottom: 15px;
            transform: translateX(-50%);
        }
        /* Dot navigation settings */
        .cir a{
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: green;
            margin-right: 10px;
            float: left;
        }
        /* Dot navigation post-click style */
        .cir a.hover{
            background-color: black;
            opacity: .5;
        }
    </style>
</head>
<body>
    <div class="banner">
        <ul class="imglist">
            <li><img src="./banner/1.png" alt=""></li>
            <li><img src="./banner/2.jpg" alt=""></li>
            <li><img src="./banner/3.jpg" alt=""></li>
            <li><img src="./banner/4.jpg" alt=""></li>
        </ul>
        <div class="cir"></div>
    </div>
    <script>
        var banner = document.querySelector('.banner');   //Get the visible border
        var imglist = document.querySelector(".imglist");  //获取ul标签
        var cir = document.querySelector('.cir');          //Get the dot navigation parentdiv
        var lis = imglist.children;                       //所有liThe labels are in a pseudo-array
        var thisindex = 0;
        var flag = true;

        window.onload = function(){
            //由图片widthand number of acquisitionsul的width
            imglist.style.width = lis.length*610+'px';      //注意：01width是小写  02Don't forget to add units‘px’
            
            //Add dot navigation according to the number of pictures
            for (var i = 0; i < lis.length; i++) {
                var anode = document.createElement('a');    //创建<a></a>
                cir.appendChild(anode);                     //在父级div里面添加<a>
            }

            cir.children[0].classList.add('hover');     //The page must exist firsthover类
            //Create dot navigationanode和ulCorrespondence of pictures
            for(var i=0; i<lis.length; i++){
                cir.children[i].setAttribute('index',i);     //li添加自定义属性'index'
            }

            //Dot click event
            cirClick();
            function cirClick(){
                cir.addEventListener('click',function(e){
                    if(e.target.nodeName != 'A'){
                        return false;
                    }
                    if(flag){                       //节流阀
                        flag = false;
                        thisindex = e.target.getAttribute('index');
                        // imglist.style.left = -thisindex*610+'px';
                        move(imglist,-thisindex*610,function(){
                            flag = true;
                        })
                    
                        cir.querySelector('.hover').classList.remove('hover');    //Restores the original style after each click on the dot（from grey to green）
                        e.target.classList.add('hover');                            //Dot click style
                    }
                    
                })  
            }

            //自动轮播
            auto();
            function auto(){
                setInterval(function(){
                    if(flag){
                        flag = false;
                        if(thisindex == lis.length){
                            thisindex = 0;
                        }
                        move(imglist,-thisindex*610,function(){
                            flag = true;
                        })
                        cir.querySelector('.hover').classList.remove('hover');    //Restores the original style after each click on the dot（from grey to green）
                        cir.children[thisindex].classList.add('hover');
                        thisindex++;
                    }
                }, 2000);
            }

            //缓动函数
            var num = 0;
            function move(box,target,callback){
                box.myTime = setInterval(function(){
                    var osleft = box.offsetLeft;     //这里是属性,不能加()
                    var num = (target-osleft) / 10;
                    num = num>0 ? Math.ceil(num):Math.floor(num);
                    if(osleft == target){
                        clearInterval(box.myTime);
                        callback && callback();
                    }else{
                        box.style.left = num+osleft+'px';
                    }
                },30)
            }     
        }
    </script>
</body>
</html>