js写轮播图


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页</title>
    <script>
        window.onload=function(){
            var b_y=document.getElementsByClassName("block")[0];
            b_y.onmouseenter=function(){
                leftspan.style.opacity="1";
                rightspan.style.opacity="1";
                clearInterval(times);
            }
            b_y.onmouseleave=function(){
                leftspan.style.opacity="0";
                rightspan.style.opacity="0";
                times=setInterval(function(){
                    fun("left");
                },1500);
            }
            var array=[[250,200,4],
                    [0,150,3],
                    [0,100,2],
                    [250,50,1],
                    [500,100,2],
                    [500,150,3]
            ];
            for(var i=1;i<7;i++){
                var image=document.createElement("img");
                b_y.appendChild(image);
                image.className="smalling";
                image.src="./image/demo"+i+".jpg";
                image.style.left=array[i-1][0]+"px";
                image.style.top=array[i-1][1]+"px";
                image.style.zIndex=array[i-1][2];

            }
            var imagelist=document.getElementsByClassName("smalling");
          var times=setInterval(function(){
                fun("left");
            },1500);
            function fun(res){
                if(res=="left"){
                    var firstimg=[imagelist[0].style.left,imagelist[0].style.top,imagelist[0].style.zIndex];
                    for(var i=0;i<imagelist.length;i++){
                    if(i<imagelist.length-1){
                        imagelist[i].style.left=imagelist[i+1].style.left;
                        imagelist[i].style.top=imagelist[i+1].style.top;
                        imagelist[i].style.zIndex=imagelist[i+1].style.zIndex;
                    }
                    else{
                        imagelist[i].style.left=firstimg[0];
                        imagelist[i].style.top=firstimg[1];
                        imagelist[i].style.zIndex=firstimg[2];
                    }
                    }
                }
                else{
                    var lastimg=[imagelist[5].style.left, imagelist[5].style.top, imagelist[5].style.zIndex];
                    for(var i=imagelist.length-1;i>=0;i--){
                        if(i!=0){
                            imagelist[i].style.left=imagelist[i-1].style.left;
                            imagelist[i].style.top=imagelist[i-1].style.top;
                            imagelist[i].style.zIndex=imagelist[i-1].style.zIndex;
                        }
                        else{
                            imagelist[i].style.left=lastimg[0];
                            imagelist[i].style.top=lastimg[1];
                            imagelist[i].style.zIndex=lastimg[2];
                        }
                    }
                }
            setTimeout(function fun(){
                smalldian[count].style.backgroundColor="";
                if(res=="left"){
                    count++;
                    if(count>smalldian.length-1){
                        count=0;
                    }
                }
                else{
                    count--;
                    if(count<0){
                        count=smalldian.length-1;
                    }
                }
                smalldian[count].style.backgroundColor="red"
            },250)
            }
            var leftspan=document.createElement("span");
            leftspan.innerHTML="<";
            leftspan.className="lefts";
            b_y.appendChild(leftspan);
            leftspan.addEventListener("click",function(e){
               if(e.detail>1){
                    return;
                }
                fun("left");
            });
            var rightspan=document.createElement("span");
            rightspan.innerHTML=">";
            rightspan.className="rights";
            b_y.appendChild(rightspan);
           rightspan.addEventListener("click",function(e){
                if(e.detail>1){
                    return;
                }
                fun("right");
            }
           );
            var dianpar=document.createElement("div");
            b_y.appendChild(dianpar);
            dianpar.className="dianpar1";
            for(var k=0;k<imagelist.length;k++){
                var dian=document.createElement("div");
                dianpar.appendChild(dian);
                dian.className="dian1"
            }
            var smalldian=document.getElementsByClassName("dian1");
            smalldian[0].style.backgroundColor="red";
            var count=0;
        };
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: black;
        }
        .block{
            position: relative;
            width: 900px;
            height: 400px;
            margin: 10% auto;
            border: 1px solid white;
        }
        .smalling{
            position: absolute;
            width: 400px;
            height: 200px;
            transition:all 0.5s linear;
        }
        .lefts{
            color: white;
            font-size: 50px;
            position: absolute;
            top: 200px;
            z-index: 10;
            cursor: pointer;
        }
        .rights{
            color: white;
            font-size: 50px;
            position: absolute;
            right: 0;
            top: 200px;
            z-index: 10;
            cursor: pointer;
        }
        .dian1{
            width: 10px;
            height: 10px;
            border: 1px solid white;
            border-radius:50%;
            display: inline-block;
            transition: all 0.5s linear;
        }
        .dianpar1{
            position: absolute;
            width: 110px;
            height: 110px;
            left: 395px;
            top: 420px;
            z-index: 10;
        }
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>
猜你喜欢
