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>

<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>