原生js实现网易云轮播图

效果图

css

<style>
        *{
            padding: 0;
            margin: 0;
        }
       
        .oul{
            position: absolute;
            width: 800px;  
            height: 200px;
            padding: 0;
            top: 50px;
            left: 0;
            right: 0;
            margin: auto;
        }
        .oul li{
            float: left;
            position: absolute;
            left: 0px;
            list-style: none;
            transition-duration: 0.5s;
            
        }
    </style>

html

 <ul class="oul"></ul>

js

<script>
    window.onload=function(){
       
       let arrimg = new Array();
       let oul =document.querySelector(".oul");
       for(let i=1;i<5;i++){
           let cur_img = document.createElement('img');
           let cur_li = document.createElement('li');
           cur_img.src =`indexImage/lunbo${i}.png`
           cur_img.style.width =400+"px";
           cur_img.style.height = 190+"px";
           cur_li.appendChild(cur_img);
           oul.appendChild(cur_li);
           arrimg.push(cur_li);
           arrimg[arrimg.length-1].style.left = "0px"
       }
       let len=arrimg.length-1;
       arrimg[len-2].style.left = "0px";
       //z中间一张    
       arrimg[len-1].style.zIndex = 100; 
       arrimg[len-1].style.transform="scale(1.3)";
       arrimg[len-1].style.left="200px";
       arrimg[len].style.left="400px";


       function nex_index(){
        // 删除首个数组元素
         arrimg.shift();
        //  向最后一张添加
         arrimg.push(arrimg[0]);
         for(let i=0;i<arrimg.length;i++){
            arrimg[i].style.zIndex = i;
            arrimg[i].style.transform = "scale(1)"
         }
            arrimg[len-2].style.left = "0px";
            //z中间一张  
            arrimg[len-1].style.zIndex = 100; 

            arrimg[len-1].style.transform="scale(1.3)";
            arrimg[len-1].style.left="200px";
            arrimg[len].style.left="400px";

       }

       setInterval(nex_index, 4000);
    }
</script>