js实现弹性拖拽堆叠堆积的图片进行幻灯片切换效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：js实现弹性拖拽堆叠堆积的图片进行幻灯片切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        @-webkit-keyframes animation{from{opacity:0; -webkit-transform:scale(1.2) rotateX(45deg);transform:scale(1.2) rotateX(45deg);} to{ }}
        
        @-webkit-keyframes animation2{from{opacity:0; -webkit-transform:scale(1.2) rotateX(45deg);transform:scale(1.2) rotateX(45deg);} to{ }}
        
        body {
            background:#1c1c1c;
                   /*-webkit-perspective:1000px;*/
                   overflow:hidden;
        }
        
        
        .slider div p{color:#1c1c1c;position:absolute;bottom:-65px; font-family:font; font-size:14px;}
        .slider{
        
             -webkit-animation:animation ease 1s;animation-delay:.8s;animation-fill-mode:backwards;
         
        
            margin:60px auto 0 auto;
            height:360px;
            width:240px;
            padding:40px;
            top:100px;
        
               perspective:1000px;
               transition:ease-in-out .2s;
                     /*-webkit-transform:rotateX(45deg);
                     -webkit-transform-style:preserve-3d;
                         position:absolute;*/
        }
        /*.slider:active{ -webkit-transform:rotateZ(10deg);}*/
        
        
        .slide img { text-align:center;width:100%; height:100%; -webkit-user-drag:none;user-drag:none;-moz-user-drag:none; border-radius:2px; }
        
        
        .slide{
           
              -webkit-user-select:none;
        user-select:none;
          -moz-user-select:none;
            position:absolute;
                height:280px;
            width:240px;
        
        box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
        background:#fcfcfc;
                     -webkit-transform-style:preserve-3d;
                      transform-style:preserve-3d;
          -moz-transform-style:preserve-3d;
                     text-align:center;
                     /*overflow:hidden;*/
                     border:12px white solid;
                     box-sizing:border-box;
                     border-bottom:55px white solid;
                     border-radius:5px;
        
        
            
        }
        .transition {
             -webkit-transition: cubic-bezier(0,1.95,.49,.73) .4s ;
           -moz-transition: cubic-bezier(0,1.95,.49,.73) .4s ;
              transition: cubic-bezier(0,1.95,.49,.73) .4s ;
        }
    </style>
  
</head>

<body style="">
    <div class="slider">
        <div class="slide" style="transform: translateX(0px) rotateZ(0deg) translateY(30px) translateZ(-150px); transition: all 0.102564s cubic-bezier(0, 1.95, 0.49, 0.73) 0s; opacity: 1;"><img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90">
            <p>eleifend tempus justo</p>
        </div>
        <div class="slide" style="transform: translateX(0px) rotateZ(0deg) translateY(20px) translateZ(-100px); transition: all 0.137931s cubic-bezier(0, 1.95, 0.49, 0.73) 0s; opacity: 1;"><img src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90">
            <p>rutrum tellus a tempus :)</p>
        </div>
        <div class="slide" style="transform: translateX(0px) rotateZ(0deg) translateY(10px) translateZ(-50px); transition: all 0.210526s cubic-bezier(0, 1.95, 0.49, 0.73) 0s; opacity: 1;"><img src="//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90">
            <p>litora torquent per conubia</p>
        </div>
        <div class="slide" style="transform: translateX(0px) rotateZ(0deg) translateY(0px); transition: all 0.4s cubic-bezier(0, 1.95, 0.49, 0.73) 0s; opacity: 1;"><img src="//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90">
            <p>sed consectetur faucibus</p>
        </div>




    </div>
    <script>
        window.addEventListener('load', onWndLoad, false);
        
        function onWndLoad() {
           
            var slider = document.querySelector('.slider');
            var sliders = slider.children;
           
           
           
           
            var initX = null;  
            var transX = 0;
            var rotZ = 0;
            var transY = 0;
           
            var curSlide = null;
            
            var Z_DIS = 50;
            var Y_DIS = 10;
            var TRANS_DUR = 0.4;
          
             var images=document.querySelectorAll('img');
          for(var i=0;i<images.length;i++)
            {
              images[i].onmousemove=function(e){
                e.preventDefault()
                
              }
              images[i].ondragstart=function(e){
                return false;
                
              }
            }
          
            function init() {
               
                var z = 0, y = 0;
        
                for (var i = sliders.length-1; i >=0; i--) {
                    sliders[i].style.transform = 'translateZ(' + z + 'px) translateY(' + y + 'px)';
                   
                    z -= Z_DIS;
                    y += Y_DIS;
                }
        
        
                attachEvents(sliders[sliders.length - 1]);
        
              
               
            }
            function attachEvents(ele.........完整代码请登录后点击上方下载按钮下载查看