js 实现一个简单的3D轮播效果

港控/mmm° 2022-06-11 03:08 154阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>3D轮播图的制作</title>
        <style>
            body,div,li{
                margin:0px;
                padding:0px;
                }
            .box{height:50px;background-color:#000}
            #box2{
                position:relative;/*相对定位的参考物*/
                border:1px solid #ccc;
                width:1400px;
                height:800px;
                margin:auto;
            } 
            #box2 ul li{
                position:absolute;/*设置绝对定位，根据上面最近的父元素进行定位，如果没有父元素就一直找到body为止*/
                border:1px solid #ccc;
                left:622px;
                top:245px;
                width:155px;
                height:310px;
                list-style:none;
                z-index:1;
            }
            #box2 ul li.li1{
                left:466px;
                top:39px;
                width:468px;
                height:722px;
                z-index:10;
            }
            #box2 ul li.li2{
                left:853px;
                top:105px;
                width:350px;
                height:590px;
                z-index:9;
            }
            #box2 ul li.li3{
                left:1120px;
                top:178px;
                width:250px;
                height:444px;
                z-index:8;
            }
            #box2 ul li.li4{
                width:100px;
                height:360px;
            }
            #box2 ul li.li5{
                width:100px;
                height:360px;
            }
            #box2 ul li.li6{
                width:200px;
                height:400px;
            }
            #box2 ul li.li7{
                top:178px;
                left:30px;
                width:250px;
                height:444px;
                z-index:8;
            }
            #box2 ul li.li8{
                top:105px;
                left:206px;
                width:350px;
                height:590px;
                z-index:9;
            }
            #box2 ul li img{
                width:100%;
                height:100%;
            }
            button{
                font-weight:bold;
                background:rgba(0,0,0,0.3);
                width:50px;
                height:60px;
                font-size:18px;
                z-index:100;
            }
            button.but1{
                position:absolute;
                top:370px;
            }
             button.but2{
                position:absolute;
               left:1350px;
                top:370px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
            <div id="box2">
                <ul>
                    <li class="li1"><img src="images2/1.jpg"></li>
                    <li class="li2"><img src="images2/2.jpg"></li>
                    <li class="li3"><img src="images2/3.jpg"></li>
                    <li><img src="images2/4.jpg"></li>
                    <li><img src="images2/5.png"></li>
                    <li><img src="images2/6.jpg"></li>
                    <li class="li7"><img src="images2/7.jpg"></li>
                    <li class="li8"><img src="images2/8.jpg"></li>
                </ul>
                <button class="but1"><</button>
                <button class="but2">></button>
            </div>
    </body>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        //当点击按钮时，图片进行轮番切换，具体操作是将其Li属性的值进行交换以便于达到所要的效果
       //var butarr=document.getElementsByTagName("button");
       var li=$("#box2 ul li");//用来获取css中所有li元素的样式
        //butarr[0].οnclick=function(){
            var time1= new Date();
        $(".but1").click(function(){
            if(new Date()-time1>500)//进行时间判断
            {
                move(0);
                time1=new Date();
            }
           
        });
        $(".but2").click(function(){
            if(new Date()-time1>500)
            {
                 move(1);
                 time1=new Date();
            }
           
        });
        //封装一个函数用来切换对应li的每一个属性值
        var n=0;
        function move(judge){
            var arrW=[],arrH=[],arrT=[],arrL=[],arrZ=[];//定义五个新的数组将用来保存当前获取到的Li元素中的各个参数
            for(var i=0;i<li.length;i++)
            {//获取到的样式元素节点.eq().css("样式名称");
                arrW[i]=li.eq(i).css("width");
                arrH[i]=li.eq(i).css("height");
                arrT[i]=li.eq(i).css("top");
                arrL[i]=li.eq(i).css("left");
                arrZ[i]=li.eq(i).css("z-index");
            }
            //var n=0;
            for(var j=0;j<li.length;j++)
            {
                //console.log(j)
                if(judge==0)
                {
                //执行左边的功能切换，图片向右进行切换  变大
                if(j==7)
                    {
                           n=0;
                           //console.log(n);
                    }
                else{
                           n=j+1;
                            //console.log(n);
                     }
                }
                else if(judge==1)
                        {
                            console.log(j);
                            if(j==0)
                            {
                                n=7;
                                console.log(n);
                            }
                            else
                            {
                                n=j-1;//j最大时为7所以n的最大值只能为6
                               console.log(n);
                            }
                            //执行右边的切换功能，图片向左进行切换
                        }
             
            //下面的功能是执行将点击过后的元素属性赋值给当前元素的css样式
            li.eq(j).css("z-index",arrZ[n]);
            //console.log(j);
            li.eq(j).animate({
                "width":arrW[n],
                "height":arrH[n],
                "left":arrL[n],
                "top":arrT[n],
    
            },500);
            }
            
        }
    </script>
    </html>