js仿照网易云轮播图小案例

最新推荐文章于 2022-05-07 00:54:19 发布

小白白中之白

最新推荐文章于 2022-05-07 00:54:19 发布

阅读量146

点赞数

分类专栏：网页案例

原文链接：https://www.bilibili.com/video/BV11k4y117W4

版权

网页案例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

代码及效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    *{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    body{
        background-color: rgb(119,115,110);
    }
    ul{
        width: 800px;
        height: 200px;
        position: absolute;
        left: 0;
        bottom: 0;
        top: 0;
        right: 0;
        margin: auto;
    }
    li{
        width: 400px;
        height: 200px;
        float: left;
        position: absolute;
        transition:  .4s;
    }
    div{
        width: 50px;
        height: 5px;
        border: 1px solid rgba(156, 156, 156, 156);
        background-color: white;
        position: absolute;
        bottom: -80px;
        z-index: 100;
    }
    </style> 
    <script>
        window.onload=function(){
            var timer=setInterval(GoNext,2000);
            var ul=document.querySelector("ul");
            ul.addEventListener("mouseenter",(e)=>{
                clearInterval(timer);
            })
            ul.addEventListener("mouseleave",(e)=>{
                clearInterval(timer);
                timer=setInterval(GoNext,2000)
            })

            var divs=new Array(); 
            var lis=new Array();
            
            for(var i=1;i<=5;i++){
                var li=document.createElement("li");
                var image=document.createElement("img");
                image.src="./image/"+i+".jpg";
                image.style.width="400px";
                image.style.height="200px";

                
                if(i!=5){
                    li.id=5-i;
                }
                else{
                    li.id=5;
                }

                
                ul.appendChild(li);
                li.appendChild(image);
                lis.push(li);

                var bottom_div=document.createElement("div");
                bottom_div.style.left=125*i+"px";              
                bottom_div.name=i;
                bottom_div.style.cursor="pointer";
                divs.push(bottom_div);
                ul.appendChild(bottom_div);

            }

            var pre_img=document.createElement("img");
            pre_img.src="./image/preimg.png";
            pre_img.style.position="absolute";
            pre_img.style.zIndex=100;
            pre_img.style.left=0;
            pre_img.style.top=0;
            pre_img.style.bottom=0;
            pre_img.style.margin="auto";
            ul.appendChild(pre_img);
            pre_img.addEventListener("click",(e)=>{
                clearInterval(timer);
                GoPre();
                timer=setInterval(GoNext,2000);
            })
            pre_img.style.cursor="pointer";

            var nex_img=document.createElement("img");
            nex_img.src="./image/neximg.png";
            nex_img.style.position="absolute";
            nex_img.style.zIndex=100;
            nex_img.style.right=0;
            nex_img.style.top=0;
            nex_img.style.bottom=0;
            nex_img.style.margin="auto";
            ul.appendChild(nex_img);
            nex_img.addEventListener("click",(e)=>{
                clearInterval(timer);
                GoNext();
                timer=setInterval(GoNext,2000);
            })
            nex_img.style.cursor="pointer";

            divs[0].style.backgroundColor="aqua";

            var len=lis.length-1;

            
            
            lis[len-2].style.left="0px";
            lis[len-1].style.left="200px";
            lis[len-1].style.zIndex=100;
            lis[len-1].style.transform="scale(1.3)"
            lis[len].style.left="400px"


            for(var i=0;i<len+1;i++){
                divs[i].onclick=function(){
                    clearInterval(timer);
                    if(this.name<lis[len-1].id){
                        while(this.name!=lis[len-1].id){
                            GoNext();
                        }
                    }
                    else{
                        while(this.name!=lis[len-1].id){
                            GoPre();
                        }
                    }
                }
                timer=setInterval(GoNext,2000);
            }

            function GoPre(){
                var lihead=lis.shift();
                lis.push(lihead);
                for(var i=0;i<len+1;i++){
                lis[i].style.left="0px";
                lis[i].style.zIndex=i;
                lis[i].style.transform="none";
            }
            lis[len-2].style.left="0px";
            lis[len-1].style.left="200px";  
            lis[len-1].style.zIndex=100;
            lis[len-1].style.transform="scale(1.3)"
            lis[len].style.left="400px"

            DivColorChange()
            }

            function GoNext(){
            var listail=lis.pop();
            lis.unshift(listail);
            for(var i=0;i<len+1;i++){
                lis[i].style.left="0px";
                lis[i].style.zIndex=i;
                lis[i].style.transform="none";
            }
            lis[len-2].style.left="0px";
            lis[len-1].style.left="200px";  
            lis[len-1].style.zIndex=100;
            lis[len-1].style.transform="scale(1.3)"
            lis[len].style.left="400px"

            DivColorChange()
            }
        

        function DivColorChange(){
            for(var i=0;i<len+1;i++){
                if(lis[len-1].id==divs[i].name){
                    divs[i].style.backgroundColor="aqua";
                }
                else{
                    divs[i].style.backgroundColor="white";
                }
            }
        }
    }

            
    </script>
</head>
<body>
    <ul></ul>
</body>
</html>

效果：
自己运行查看

注意

数字与字符串拼接后为字符串
上述代码中数组中末尾的三个下标对应的图片在不断变化，但是图片id没变
这个案例中未采用事件监听中的箭头函数因为指向window（点击这里查看详情）

小白白中之白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js仿照网易云轮播图小案例

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
复制链接

扫一扫

专栏目录