原生js实现轮播图——卡片模式(图片)

1、需求

• 轮播图自动播放，无限循环，无缝衔接。
• 鼠标进入，关闭定时器；鼠标离开，开启定时器。

2、效果

3、代码

html代码：

 <div class="box">
        <div class="list">
          <img src="../assets/01.png" class="selling_imgs" />
          <img src="../assets/02.png" class="selling_imgs" />
          <img src="../assets/03.jpeg" class="selling_imgs" />
          <img src="../assets/04.jpeg" class="selling_imgs" />
          <img src="../assets/05.jpeg" class="selling_imgs" />
          <img src="../assets/06.jpeg" class="selling_imgs six_div" />
        </div>
    </div>

css代码：

.box {
            width: 800px;
            height: 200px;
            position: relative;
            margin: 0 auto;
            overflow: hidden;/*超出部分隐藏*/            
        }
        .list{
            display:flex;
            position: absolute;
            left: 0px;
        }
        .list .selling_imgs{
            display: flex;
            justify-content: center;/*行距中*/
            align-items: center;/*列居中*/
            width: 200px;
            height: 200px;
            margin-left: 2px;
            margin-right: 2px;            
        }

js代码：

 function load(){
            const list=document.querySelector('.list')
            const box=document.querySelector('.box');
            list.innerHTML+=list.innerHTML //复制长度为两倍
            let left=list.style.left; //为list的左距离
            let timer;//为定时器
            // 移动函数 每次-2如果到达第二次的第一个div贴近list的情况下将会left==0，类似于障眼法。
            function move(){
                clearInterval(timer);
                // 定时器开启部分
                timer=setInterval((env)=>{
                    left=left-2;
                    console.log(list.clientLeft);
                    if(left==-(6*200+6*4)){ //指的是每个宽度200有6个加上我的margin宽度
                        left=0;
                    }
                    list.style.left=left+'px';
                },20);
            }
            
                 move();
                 //鼠标放入清楚计时器停止
                box.addEventListener('mouseenter',()=>{
                    clearInterval(timer);
                });
                // 鼠标移出执行一遍定时器继续移动
                box.onmouseleave=function(){
                     move();
                };
        };
        document.addEventListener('DOMContentLoaded',load);