渡一教育公开课web前端开发JavaScript精英课学习笔记（十七）jQuery、css3 实现3D轮播图

本文链接：https://blog.csdn.net/jingliuting/article/details/87475662

jQuery、css3 实现3D轮播图

图片素材可在网上找

<!DOCTYPE html>
<html>
<head>
  <style>
    *{
      margin:0;
      padding:0;
      font-size:0;
    }
    .wrapper{
      position:relative;
      height:200px;
      margin-top:150px;
      transform-style: preserve-3d;/*3D效果*/
      perspective: 800px;/*景深*/
    }
    .wrapper img{
      position:absolute;
      width:300px;
      height:200px;
      border-radius: 10px;
      left:50%;
      margin-left: -150px;
      transition: transform 0.5s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <img src="./imgs/1.jpg" alt="">
    <img src="./imgs/2.jpg" alt="">
    <img src="./imgs/3.jpg" alt="">
    <img src="./imgs/4.jpg" alt="">
    <img src="./imgs/5.jpg" alt="">
  </div>

  <script src="./imgs/jquery-1.8.3.min.js"></script>
  <script>
    var imgLen = $('img').length;
    var curDisplay = 0;
    var flag = true;
    var timer = 0;
    function init(){
      show();
      bindEvent();
    }
    init();
    //平移旋转
    function show(){
      var lNum,rNum,hLen = Math.floor( imgLen / 2);
      for(var i = 0; i < hLen; i++){
        lNum = curDisplay - i - 1;
        $('img').eq(lNum).css({
          transform:'translateX(' + (-250 * (i + 1)) + 'px) rotateY(30deg) translateZ(' + (200 - i * 100) + 'px)'
        });
        rNum = curDisplay + i + 1;
        if(rNum > imgLen - 1){
          rNum -= imgLen;
        }
        $('img').eq(rNum).css({
          transform:'translateX(' + (250 * (i + 1)) + 'px) rotateY(-30deg) translateZ(' + (200 - i * 100) + 'px)'
        });
        $('img').eq(curDisplay).css('transform','translateZ(300px)');
        $('img').on('transitionend',function(){
          console.log(flag);
          flag = true;
        })

      }
    }
    function bindEvent(){
      $('img').on('click',function(){
        if(flag && curDisplay != $(this).index()){
          flag = false;
          curDisplay = $(this).index();
          show();
        }
      });
      $('div').hover(function(){
        clearInterval(timer);
      },function(){
        timer = setInterval(play, 2000);
      });
      timer = setInterval( play, 2000);
    }
    function play(){
      if(curDisplay == imgLen - 1){
        curDisplay  = 0;
      }else{
        curDisplay ++;
      }
     show();
    }
  </script>
</body>
</html>