一行代码，实现完整的无缝轮播图。

优势：

        1、只需复制main.js即可使用

        2、只需传入几个参数就可以实现轮播图（部分参数也有默认值)。如速度、停止的时间。

        3 、轮播图里的每一个元素都有单独的class，这个你可以通过样式表，设置这个轮播图里的任意元素的样式。（重要的下面有图例，其他的要靠您自己去找.

        4、我们还有几个方法可以直接使用，如stop_()停止轮播、run_()开始轮播、go_to(0-最后)跳到指定图片位置。

源码：

main.js

class Carouse_creat{
    /**
     * @param {Array} image_arr -图片的数组
     * @param {Element} box_dom -装轮播图的盒子
     * @param {Object} option -配置文件
     */
    constructor(image_arr,box_dom,option={
transition_time:'1s',//移动动画的时间
stop_time:5000,//每张图片停留的时间
    right_button_img_url:'https://sc.adminbuy.cn/static/upload/image/20240325/1711333024410132.png',
    left_button_img_url:'https://sc.adminbuy.cn/static/upload/image/20240325/1711332368397145.png'}){
        this.image_arr=image_arr
        this.box_dom=box_dom
        this.option=option
        this.now_show_img_num=0
        this.ul=document.createElement('ul')
        this.stop_key=false
        this.time_out=option.stop_time
        this.option=option
        this.transition_time=option.transition_time
        this.set_tomeout=null
        this.left_button_img_url=option.left_button_img_url
        this.right_button_img_url=option.right_button_img_url
    }
    init(){
        this.box_dom.style.overflow='hidden'
        this.ul.className='carouse_creat_ul'
        this.ul.style.height='100%'
        this.ul.style.transition='transform 1s linear'
        this.ul.style.transform= 'translateX(0px)'
        this.ul.style.width=this.image_arr.length*100+100+'%'
        for(let zero=0,l=this.image_arr.length;zero<l;zero+=1){
            this.ul.appendChild( this.creat_li_node(this.image_arr[zero]))
        }
        this.ul.appendChild(this.creat_li_node(this.image_arr[0]))
        this.box_dom.appendChild(this.ul)
        this.set_tomeout= setInterval(()=>{
            this.mover_()
        },this.time_out)
        this.work()
        document.querySelectorAll('.carouse_list')[0].classList.add('now_list')
        document.querySelector('.now_list').style.backgroundColor='red'//ok
        
        this.box_dom.addEventListener('mousemove',()=>{
            this.stop_()
        })
        this.box_dom.addEventListener('mouseout',()=>{
            this.run_()
        })
    }
    work(){
        let div=document.createElement('div')
        div.style.display='flex'
        this.box_dom.style.position='none'
        div.style.position='relative'
        div.style.top='-'+this.box_dom.style.height
        div.style.height=this.box_dom.style.height
        div.style.width=this.box_dom.style.width
        div.style.justifyContent='space-between'
        let left_button=document.createElement('div')
        let right_button=document.createElement('div')
        let list_box=document.createElement('ul')
        for(let zero=0,l=this.image_arr.length;zero<l;zero+=1){
            let list=document.createElement('li')
            list.style.float='left'
            list.className='carouse_list'
            list.style.borderRadius='50%'
            list.style.height='10px'//ok
            list.style.width='10px'//ok
            list.style.border='2px solid'
            list.style.margin='0 10px 16% 10px'//ok
            list_box.appendChild(list)
            list.addEventListener('click',()=>{
                this.go_to(zero)
            })
        }
        list_box.style.alignSelf='flex-end'
        left_button.className='carouse_left_button'
        right_button.className='carouse_right_button'
        left_button.style.width='30px'//ok
        right_button.style.width='30px'//ok
        left_button.style.height='50px'//ok
        right_button.style.height='50px'//ok
        left_button.style.backgroundColor='rgb(255, 234, 48)'//ok
        right_button.style.backgroundColor='rgb(255, 234, 48)'//ok
        left_button.style.alignSelf='center'
        right_button.style.alignSelf='center'
        right_button.style.margin='0 8% 0 0'//ok
        left_button.style.margin='0  0 0 8%'//ok
        right_button.innerHTML=`<img src='${this.right_button_img_url}' width='100%' height='100%'>`
        left_button.innerHTML=`<img src='${this.left_button_img_url}' width='100%' height='100%'>`
        div.appendChild(left_button)
        div.appendChild(list_box)
        div.appendChild(right_button)
        this.box_dom.appendChild(div)
        left_button.addEventListener('click',()=>{
            this.go_to(this.now_show_img_num-1>=0?this.now_show_img_num-1:this.image_arr.length-1)
        })
        right_button.addEventListener('click',()=>{
            this.go_to(this.now_show_img_num+1<this.image_arr.length?this.now_show_img_num+1:0)
        })
    }
    creat_li_node(img_src){
        let li=document.createElement('li')
        li.className='carouse_creat_li'
        li.style.float='left'
        li.style.height='100%'
        li.style.width=this.box_dom.style.width
        let img=`<img src="${img_src}" class="carouse_creat_img" style='width:100%;height: 100%;'/>`
        li.innerHTML=img
        return li
    }
    mover_(){ 
        if(this.stop_key){
            return
        }
        if(this.now_show_img_num==this.image_arr.length){
           this.ul.style.transition='transform 0s linear'
           this.now_show_img_num=0
           this.ul.style.transform= `translateX(-${this.now_show_img_num*parseFloat(this.box_dom.style.width) }px)`
           return
        }
        this.ul.style.transition=`transform ${this.transition_time} linear`
        this.now_show_img_num+=1
        this.ul.style.transform= `translateX(-${this.now_show_img_num*parseFloat(this.box_dom.style.width) }px)`

        document.querySelector('.now_list').style.backgroundColor=''
        document.querySelector('.now_list').classList.remove('now_list')
        document.querySelectorAll('.carouse_list')[this.now_show_img_num<this.image_arr.length?this.now_show_img_num:0].classList.add('now_list')
        document.querySelector('.now_list').style.backgroundColor='red'
    }
    stop_(){
       clearInterval(this.set_tomeout) 
    }
    run_(){
        this.set_tomeout= setInterval(()=>{
            this.mover_()
        },this.time_out)
    }
    go_to(num){
        clearInterval(this.set_tomeout)
        this.now_show_img_num=num
        this.ul.style.transform= `translateX(-${this.now_show_img_num*parseFloat(this.box_dom.style.width) }px)`
        this.set_tomeout= setInterval(()=>{
            this.mover_()
        },this.time_out)
        document.querySelector('.now_list').style.backgroundColor=''
        document.querySelector('.now_list').classList.remove('now_list')
        document.querySelectorAll('.carouse_list')[this.now_show_img_num<this.image_arr.length?this.now_show_img_num:0].classList.add('now_list')
        document.querySelector('.now_list').style.backgroundColor='red'//ok
    }
}

注意：所有后面跟有//ok注释的都是为了演示而设置的样式，你可以自行删除，自己设置。

注意：盒子必须有宽高，因为轮播图的宽高都是由盒子宽高决定的。

示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            outline: none;
            margin: 0px;
            padding: 0px;
            border: 0px;
            list-style: none;
        }
        .carouse_left_butto{
            background-color: aqua;
        }
        #app{
            border: 5px solid rgb(0, 97, 242);border-radius: 5%;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div id="app" style="height: 300px;width: 500px;">

    </div>
</body>
<script src="./2D_main.js"></script>
<script>
    let r=new Carouse_creat(['./image/1pag.png','./image/2pag.png','./image/3.pag.png','./image/屏幕截图 2024-04-25 224359.png','./image/4pag.png','./image/3.pag.png'],document.querySelector('#app'))
    r.init()
</script>
</html>