CSS3+jQuery实现3D轮播图

来源：互联网发布：js指定日期格式化编辑：程序博客网时间：2024/06/17 00:36

1、HTML和css代码部分

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script><style>    *{margin:0; padding:0; list-style:none;}.wrap{width: 600px;height: 300px;margin: 50px auto;    position: relative;}.cut{width: 600px;height: 300px;margin: 50px auto;transform-style: preserve-3d;}.cut li{width: 100px;height: 300px;float: left;    transform-style: preserve-3d;   position: relative;}.cut li div{height: 100%;width: 100%;position: absolute;}.cut li div:nth-of-type(1){background: pink;transform: rotateX(0deg) translateZ(150px);}.cut li div:nth-of-type(2){    background: #1EED7E;transform: rotateX(90deg) translateZ(150px);}.cut li div:nth-of-type(3){background: #CBED1E;    transform: rotateX(180deg) translateZ(150px);}.cut li div:nth-of-type(4){background: #2354D7;transform: rotateX(-90deg) translateZ(150px);}.page a{display: block;height: 70px;width: 40px;background: rgba(0,0,0,0.2);text-decoration:none;color: #fff;   font-size: 26px;line-height: 70px;text-align: center;position: absolute;top: 50%;margin-top: -35px;}.page a:hover{background: rgba(0,0,0,0.5);}.page .left{border-radius: 0 3px 3px 0;}.page .right{right: 0;border-radius: 3px 0 0 3px;}</style>

<div class="wrap">   <ul class="cut">      <li>         <div></div>         <div></div>         <div></div>         <div></div>      </li>      <li>         <div></div>         <div></div>         <div></div>         <div></div>      </li>      <li>         <div></div>         <div></div>         <div></div>         <div></div>      </li>      <li>         <div></div>         <div></div>         <div></div>         <div></div>      </li>      <li>         <div></div>         <div></div>         <div></div>         <div></div>      </li>      <li>         <div></div>         <div></div>         <div></div>         <div></div>      </li>   </ul>   <div class="page">      <a href="javascript:;" class="left">&lt;</a>      <a href="javascript:;" class="right">&gt;</a>   </div></div>

2、jQuery部分

<script>   $(function(){      var $t = null,$num=0;      var $clis = $('.cut li');      $clis.each(function(index,target){         $(target).children('div').css('backgroundPosition',-600/6*index + 'px');         $(target).css('transition', index*0.2 +'s');//设置旋转的时间      });      function move(){         $clis.css('transform','rotateX('+ $num*90 +'deg)');      }      function autoMove(){         clearInterval($t);//在运行一个计时器前先清除计时器         $t = setInterval(function(){            $num++;            move();         },5000);      }      autoMove();//进入页面自动滚动      $('.wrap').on('mouseenter',function(){         clearInterval($t);      }).on('mouseleave',function(){         autoMove();      });      $('.right').on('click',function(){         $num++;         move();      });      $('.left').on('click',function(){         $num--;         move();      });      $(window).blur(function () {         clearInterval($t);      }).focus(function () {         autoMove();      });   })</script>

0 0