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

最新推荐文章于 2023-02-15 14:33:54 发布
HeartAndThink
最新推荐文章于 2023-02-15 14:33:54 发布
阅读量2.1k
点赞数 1
文章标签： 3d轮播 javascript
本文链接：https://blog.csdn.net/heartAndthink/article/details/76272474
版权
<!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>