轮播图封装，包含进度圆点，左右切换

轮播图封装，包含进度圆点，左右切换

封装一个函数，方便多次调用
html:

<div class="home-Carousel" >
    <ul class="list1">
        <li class="item1 active">
            <a href="javascript:;" class="user_signIn">
                <div class="home-Carousel-Img">
                    <img src="/images/login2/smartElectricity.png" />
                </div>
            </a>
        </li>
        <li class="item1">
            <a  href="javascript:;" class="user_signIn">
                <div class="home-Carousel-Img">
                    <img src="/images/login2/smartGas.png" />
                </div>
            </a>
        </li>
        <li class="item1">
            <a  href="javascript:;" class="user_signIn">
                <div class="home-Carousel-Img">
                    <img src="/images/login2/smartWater.png" />
                </div>
            </a>
        </li>
    </ul>
    <div class="carouselOpt1">
        <ul class="pointList1">
            <li class="point1 active" data-index = 0></li>
            <li class="point1" data-index = 1></li>
            <li class="point1" data-index = 2></li>
        </ul>
    </div>
    <img  class="btn1" id="leftBtn1" src="/images/login2/back.png">
    <img  class="btn1" id="rightBtn1" src="/images/login2/next.png">
</div>

css:

.home-Carousel{
   position: relative;
   width: 100%;
   height: 600px;
   overflow: hidden;
}
.home-Carousel-Img {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}
.list1{
   width: 100%;
   height: 100%;
   position: relative;
   padding-left: 0px;
   margin-bottom: 0 !important;
}

.item1{
   list-style: none;
   position: absolute;
   left: 0;
   opacity: 0;
   transition: all .8s;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}


.item1.active{
   z-index: 10;
   opacity: 1;
}
.carouselOpt1{
   position: relative;
   width: 58px;
   height: 60px;
   bottom: 9%;
   left: 50%;
}

.btn1:focus{
   background: #E8E8E8;
}

#leftBtn1{
   display: none;
   width: 36px;
   height: 36px;
   top:45%;
   left:0%;
}
.home-Carousel:hover #leftBtn1{
   display: block;
}


#rightBtn1{
   display: none;
   width: 36px;
   height: 36px;
   top:45%;
   right:0%;
}
.home-Carousel:hover #rightBtn1{
   display: block;
}

#rightBtn1 {
   right: 0px;
}
.pointList1{
   list-style: none;
   position: absolute;
   top: 26%;
   z-index: 200;
   display: inline-block;
   padding: 5px;
   background-color: rgba(0,0,0,.2);
   border-radius: 10px;
   -webkit-transition-duration: .3s;
   transition-duration: .3s;
}
.point1 {
   width: 10px;
   height: 10px;
   background-color: #E8E8E8;
   border-radius: 100%;
   float: left;
   margin: 0 3px;
   cursor: pointer;
}

.point1.active{
   background-color: #3399FF;
}

js:

 carouselFn('item1','point1','leftBtn1','rightBtn1','home-Carousel');
// 公用轮播图函数
function carouselFn(item,point,leftBtn,rightBtn,home){
    var items = document.querySelectorAll("."+item);//图片
    var points = document.querySelectorAll("."+point)//点
    var left = document.getElementById(""+leftBtn);//左按钮
    var right = document.getElementById(""+rightBtn);//右按钮
    var all = document.querySelector("."+home)//整个按钮轮播图内容
    var index = 0;
    var time = 0;//定时器跳转参数初始化

    //清除active方法
    var clearActive = function () {
        for (var i = 0; i < items.length; i++) {
            items[i].className = ''+item;
        }
        for (var j = 0; j < points.length; j++) {
            points[j].className = ''+point;
        }
    }

    //改变active方法
    var goIndex = function () {
        clearActive();
        items[index].className = item+' active';
        points[index].className = point+' active'
    }

    //左按钮事件
    var goLeft = function () {
        if (index == 0) {
            index = items.length-1;
        } else {
            index--;
        }
        goIndex();
    }

    //右按钮事件
    var goRight = function () {
        if (index < items.length-1) {
            index++;
        } else {
            index = 0;
        }
        goIndex();
    }

    //左右点击事件-绑定点击事件监听
    left.addEventListener('click', function () {
        goLeft();
        time = 0;//计时器跳转清零
    })

    right.addEventListener('click', function () {
        goRight();
        time = 0;//计时器跳转清零
    })

    //圆点点击事件-绑定点击事件监听
    for(var i = 0;i < points.length;i++){
        points[i].addEventListener('click',function(){
            var pointIndex = this.getAttribute('data-index')
            index = pointIndex;
            goIndex();
            time = 0;//计时器跳转清零
        })
    }

    //计时器
    var timer;
    //自动播放
    play();
    function play(){
        clearInterval(timer)
        timer = setInterval(() => {
            time ++;
            if(time == 25 ){
                goRight();
                time = 0;
            }
        },100)
    }

    //移入清除计时器
    all.onmousemove = function(){
        clearInterval(timer)
    }
    //移出启动计时器
    all.onmouseleave = function(){
        play();
    }

}

参考：https://blog.csdn.net/qq_20495901/article/details/122936580?spm=1001.2014.3001.5506