3D 立体感轮播图翻转效果，更好的视觉效果

最新推荐文章于 2022-01-11 16:53:22 发布

笔临

最新推荐文章于 2022-01-11 16:53:22 发布

阅读量2.6k

点赞数 4

本文链接：https://blog.csdn.net/panhuanqin/article/details/83055546

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   .box{
      position: relative;
      width: 100%;
      height:500px;  
       transform-style: preserve-3d;
       perspective:800px;

   }
   li{
          width: 300px;
          height: 200px;
          position: absolute;
          left:50%;
       top:50%;
       margin-left:-150px;
       margin-top:-100px;
       list-style: none;
       border-radius: 5px;
      transition: 1s;
      overflow: hidden;
   }
   img{
      width: 100%;
      height: 100%;
   }
   </style>
</head>
<body>
   <ul class="box">
      <li><img src="img/1.jpg" alt=""></li>
      <li><img src="img/2.jpg" alt=""></li>
      <li><img src="img/3.jpg" alt=""></li>
      <li><img src="img/4.jpg" alt=""></li>
      <li><img src="img/5.jpg" alt=""></li>
      <li><img src="img/6.jpg" alt=""></li>
      <li><img src="img/7.jpg" alt=""></li>
   </ul>
   <script>
      var li=document.getElementsByTagName("li");
      var iNow=3;
    var iTaget = 0;
         fn(iNow);
     function fn(n){
       for (let i = 1; i < 4; i++) {
          var left=n-i;
          if (left<0) {
             left=left+7;
          }
          li[left].style.transform=`translateX(${-150*(i)}px) translateZ(${300-i*100}px) rotateY(30deg)`
          var right=n+i;
             if (right>6) {
                 right=right-7
             }
          li[right].style.transform=`translateX(${150*(i)}px) translateZ(${300-i*100}px) rotateY(-30deg)`
       }
       li[n].style.transform="translateZ(300px)"
     } 
     var middle=0;
     for (var i = 0; i < li.length; i++) {
      li[i].index=i;
      li[i].οnclick=function(ev){
             middle=document.documentElement.clientWidth/2;
             num=ev.clientX;
             iTaget=this.index;
             if (middle<=num) {
               goleft()
              }else{
               goright()  
              }   
      }
     }
      function goleft(){
        if (iNow==iTaget) {
          return     
        }
        iNow++;
        if (iNow>6) {
          iNow=0;
        }
        fn(iNow);
        setTimeout(function(){
          goleft()
        },700)  
      }
      function goright(){
      if (iNow==iTaget) {
        return     
      }
      iNow--;
      if (iNow<0) {
          iNow=6;
        }
      fn(iNow);
      setTimeout(function(){
        goright()
      },700)  
    }
   </script>
</body>
</html>

笔临

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
3D 立体感轮播图翻转效果，更好的视觉效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box{ position: relati
复制链接

扫一扫