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

来源：互联网发布：仿真模拟软件编辑：程序博客网时间：2024/06/09 17:13
<!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].onclick=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>
阅读全文
0 0