原生js实现3D切割轮播图

最新推荐文章于 2024-04-25 08:35:45 发布

Join_Liang

最新推荐文章于 2024-04-25 08:35:45 发布

阅读量137

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Join_Liang/article/details/125988431

版权

CSS3 3D翻转 JavaScript 图片切换过渡效果

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            width: 560px;
            height: 380px;
            border:1px solid #0094ff;
            margin: 100px auto;
            position: relative;
            display: flex; 
        }
        /*
            伪元素的 作用是 在不改变 html代码的情况下 添加一些外观
            由于在js中是无法获取的,无法绑定点击事件
            伪元素的作用:添加修饰的外观 不参数 dom事件的操作
        */
        .before {
            text-decoration: none;
            font-size:100px;
            line-height: 100px;
            width: 100px;
            height: 100px;
            text-align: center;
            background-color: gray;
            color:white;
            position: absolute;
            top:140px;
            left:-100px;
        }
        .after{
            text-decoration: none;
            font-size:100px;
            background-color: gray;
            color:white;
            position: absolute;
            width: 100px;
            height: 100px;
            position: absolute;
            line-height: 100px;
            text-align: center;
            right:-100px;
            top:140px;
        }
        .items{
            list-style: none;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: orange;
            margin: 0;
            position: relative;
            transform-style: preserve-3d;
            transition: all 1s;
        }
        .items .item{
            width: 100%;
            height: 100%;
            position: absolute;
            
        }
        .item:nth-child(1){
            background: url(imgs/01.jpg);
            transform: rotateX(0) translateZ(190px);
         
        }
         .item:nth-child(2){
            background: url(imgs/02.jpg);
            transform: rotateX(180deg) translateZ(190px);
             
        }
         .item:nth-child(3){
            background: url(imgs/03.jpg);
            transform: rotateX(90deg) translateZ(190px);
        }
         .item:nth-child(4){
            background: url(imgs/04.jpg);
            transform: rotateX(-90deg) translateZ(190px);
        }
        
/*      为 第二个 .items 里面的 .item 设置 图片偏移  */
        .items:nth-child(2) .item{
            background-position: -140px 0px;
        }
         .items:nth-child(3) .item{
            background-position: -280px 0px;
        }
         .items:nth-child(4) .item{
            background-position: -420px 0px;
        }
    </style>
   <script src='js/jquery-3.0.0.min.js'></script>
   <script>
       // 定义变量 保存 点击的次数
       var clickNum = 0;
       
       // 定义变量 来判断是否正在旋转
       var isTransition = false;
       
       // 入口函数
        $(function(){
           
            // 为 .items 绑定 过渡 结束事件
            $('.items').last().on('transitionend',function(){
                // alert('最后一个 过渡完毕');
                // 才能够 再次点击
                isTransition = false;
            })
            
            // 下一张按钮 点击事件绑定
            $('.after').on('click',function(){
                
                // 判断 是否可以 让items 进行旋转
                if(isTransition == true)return;
                
                // 如果能够执行到这里 说明 isTransition=false;
                isTransition = true;
                
                // 累加点击次数
                clickNum++;
                // 使用 循环 来实现 延迟 过渡
                $('.items').each(function(index,ele){
                    // 实现 延迟过渡
                     setTimeout(function(){
                        $(ele).css({
                        transform:'rotateX('+clickNum*90+'deg)'
                        })
                    },index*100)
                })
            });
            $('.before').on('click',function(){
                // 判断 是否可以 让items 进行旋转
                if(isTransition == true)return;
                
                // 如果能够执行到这里 说明 isTransition=false;
                isTransition = true;
                
                // 累加点击次数
                clickNum--;
                
                // 使用 循环 来实现 延迟 过渡
                $('.items').each(function(index,ele){
                    // 实现 延迟过渡
                     setTimeout(function(){
                        $(ele).css({
                        transform:'rotateX('+clickNum*90+'deg)'
                        })
                    },index*100)
                })
            });
            })
        
    </script>
</head>
<body>
    <div class="container">
       
       <ul class="items">
           <li class="item"></li>
           <li class="item"></li>
           <li class="item"></li>
           <li class="item"></li>
       </ul>
       <ul class="items">
           <li class="item"></li>
           <li class="item"></li>
           <li class="item"></li>
           <li class="item"></li>
       </ul>   
        <ul class="items">
           <li class="item"></li>
           <li class="item"></li>
           <li class="item"></li>
           <li class="item"></li>
       </ul>
         <ul class="items">
           <li class="item"></li>
           <li class="item"></li>
           <li class="item"></li>
           <li class="item"></li>
       </ul>      
<!--     a标签 点击不跳转  href="javascript:void(0)"  -->
        <a href="javascript:void(0)" class='before'>&lt;</a>
        <a href="javascript:void(0)" class='after'>&gt;</a>
    </div>
</body>
</html>