JS实现简单轮播图

以下为HTML页面布局和css样式，完成如图效果，显示一张照片，其余隐藏。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .crousel{
            width: 1700px;
            height: 560px;
            overflow: hidden;
            margin: auto;
            position: relative;
        }
        //设置起始位置为0
        .imgCon{
            width: 8500px;
            height: 560px;
            position: absolute;
            left: 0;
            transition: all 0.5s;
            font-size: 0;
        }
        .imgCon>img{
            width: 1700px;
            height: 560px;
        }
        .leftBn,.rightBn{
            position: absolute;
            top:250px ;
        }
        .leftBn{
            left: 50px;
        }
        .rightBn{
            right: 50px;
        }
        ul{
            list-style: none;
            position: absolute;
            left: 710px;bottom: 50px;
        }
        li{
            width: 40px;
            height: 40px;
            border: 2px solid red;
            border-radius: 50%;
            float: left;
            margin-left: 20px;
        }
        li:nth-child(1){
            margin-left: 0;
        }
    </style>
<div class="crousel">
        <div class="imgCon">
            <img src="./img/a.jpeg" >
            <img src="./img/b.jpeg" >
            <img src="./img/c.jpeg" >
            <img src="./img/d.jpeg" >
            <img src="./img/e.jpeg" >
        </div>
        <img src="./img/left.png" class="leftBn">
        <img src="./img/right.png" class="rightBn">
        <ul class="list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

需求：

1、点击左右方向图标切换图片
2、点击图片中的小圆点切换图片
3、切换对应的图片改变小圆点颜色

点击切换图片实际上就是点击按钮时让装图片的盒子滚动也就是imgCon，点击右方向图标时，向左边滚动，把下一张图片显示出来，点击左方向图标，向右边滚动，显示前一张照片。
以下为JS代码

<script>

        
        var imgCon,leftBn,rightBn,list,prevDot;
        //设置一个变量pos初始为0，相当于就是初始为第一张图片，通过改变pos的值来切换图片，为1时就切换到第二张，以此类催
        var pos=0;

        init();
        function init(){
            //获取到装图片的盒子和左右按钮
            imgCon=document.querySelector(".imgCon");
            leftBn=document.querySelector(".leftBn");
            rightBn=document.querySelector(".rightBn");
            //获取所有的li并转换为数组，5个li对应5张图片
            list=Array.from(document.querySelectorAll("li"));
            //添加点击函数
            leftBn.onclick=clickHandler;
            rightBn.onclick=clickHandler;
            // 给每个li添加点击函数
            list.forEach(function(item){
                item.onclick=DotclickHandler;
            })
            changeDot();
        }

        function clickHandler(){
            //this为点击的目标，当点击左边按钮时
            if(this===leftBn){
                //pos递减，当减到0时，也就是初始图片时，设置pos=4，直接切换至最后一张
                pos--;
                if(pos<0) pos=4;
            }else{
                //点击右边按钮时，pos++，当大于4时，设置为0，切换至第一张图片
                pos++;
                if(pos>4) pos=0;
            }
            //设置imgCon样式 1700px就是一张图片的位置，pos为几，就显示第几章
            imgCon.style.left=pos*-1700+"px";
            changeDot();
        }

        function DotclickHandler(){
            //在list数组中查找点击的元素，返回元素的下标，list里面5个li，下标0-4，查到到的下标赋值给pos
            pos=list.indexOf(this);
            //改变imgCon样式  切换图片
            imgCon.style.left=pos*-1700+"px";
            changeDot();
        }

        function changeDot(){
            //如果上一个圆点变量存在时，将其设置为透明
            if(prevDot) prevDot.style.backgroundColor="rgba(255,0,0,0)";
            //将点击的小圆点设置为红色
            prevDot=list[pos];
            prevDot.style.backgroundColor="rgba(255,0,0)"
        }

    </script>

这样就完成了一个简单的轮播图