Rotating Image Slider 特殊排列展示櫃

Rotating Image Slider 創建一個非對稱一點點扭曲的圖片展示櫃基於 jQuery 框架，內容圖片以扇狀圖片本身不規則的角度切割，有自動撥放和上下頁導覽的功能更具備了滑鼠滾輪捲動來更換圖片，這一個範例還運用到了一個 jQuery 2D Transformation 的套件主要視角度轉換和動畫效果的套件。圖片授權非商業性使用。

範例中的圖片來源：http://www.behance.net/AndrewLili
使用方法：
第一步 載入 Rotating Image Slider 需要用到的 JavaScript 檔案
<!-- 使用Google ajax API 直接連結 jQuery 1.8.2的min版本 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 載入  jQuery 2D Transformation -->
<script src="js/jquery.transform-0.9.3.min_.js"></script>
<!-- 載入 jQuery 的滑鼠事件  -->
<script src="js/jquery.mousewheel.js"></script>
<!-- Rotating Image Slider 的主程式碼 -->
<script src="js/jquery.RotateImageMenu.js"></script>


第二步 在 HTML 中規劃展示櫃的位置
<div class="content">
  <div class="rm_wrapper">
<div id="rm_container" class="rm_container">
 <ul>
        <li data-images="rm_container_1" data-rotation="-15"><img src="images/1.jpg"/></li>
        <li data-images="rm_container_2" data-rotation="-5"><img src="images/2.jpg"/></li>
        <li data-images="rm_container_3" data-rotation="5"><img src="images/3.jpg"/></li>
        <li data-images="rm_container_4" data-rotation="15"><img src="images/4.jpg"/></li>
 </ul>
 <div id="rm_mask_left" class="rm_mask_left"></div>
 <div id="rm_mask_right" class="rm_mask_right"></div>
 <div id="rm_corner_left" class="rm_corner_left"></div>
 <div id="rm_corner_right" class="rm_corner_right"></div>
 <h2>Fashion Explosion 2012</h2>
 <div style="display:none;">
        <div id="rm_container_1">
          <img src="images/1.jpg"/>
          <img src="images/5.jpg"/>
          <img src="images/6.jpg"/>
          <img src="images/7.jpg"/>
        </div>
        <div id="rm_container_2">
          <img src="images/2.jpg"/>
          <img src="images/8.jpg"/>
          <img src="images/9.jpg"/>
          <img src="images/10.jpg"/>
        </div>
        <div id="rm_container_3">
          <img src="images/3.jpg"/>
          <img src="images/11.jpg"/>
          <img src="images/12.jpg"/>
          <img src="images/13.jpg"/>
        </div>
        <div id="rm_container_4">
          <img src="images/4.jpg"/>
          <img src="images/14.jpg"/>
          <img src="images/15.jpg"/>
          <img src="images/16.jpg"/>
        </div>
 </div>
    </div>
    <div class="rm_nav">
      <a id="rm_next" href="#" class="rm_next"></a>
      <a id="rm_prev" href="#" class="rm_prev"></a>
    </div>
    <div class="rm_controls">
      <a id="rm_play" href="#" class="rm_play">Play</a>
      <a id="rm_pause" href="#" class="rm_pause">Pause</a>
    </div>
  </div>
</div>

第三步 設計展示櫃的 CSS 樣式
@import url('reset.css');
body{
background:#f0f0f0;
color:#000;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:16px;
}
a{
color:#000;
text-decoration:none;
}
h1{
padding:10px;
margin:20px;
font-size:40px;
text-transform:uppercase;
text-shadow:0px 0px 1px #fff;
color:#333;
background:transparent url(../images/line.png) repeat-x bottom left;
}
.rm_wrapper{
width:1160px;
margin:0 auto;
position:relative;
}
.rm_container{
width:1050px;
overflow:hidden;
position:relative;
height:530px;
margin:0 auto;
}
.rm_container h2{
background:transparent url(../images/lines.png) repeat top left;
padding:10px 30px;
position:absolute;
bottom:170px;
right:0px;
color:#000;
font-size:36px;
text-transform:uppercase;
text-shadow:1px 0px 1px #fff;
}
.rm_container ul{
width:1170px;
}
.rm_container ul li{
float:left;
margin-left:-80px;
position:relative;
overflow:hidden;
width:310px;
height:465px;
border:30px solid #f0f0f0;
border-width:50px 30px 0px 30px;
background-color:#f0f0f0;
}
.rm_container ul li img{
position:absolute;
top:0px;
left:0px;
}
.rm_mask_right, .rm_mask_left{
position: absolute;
height: 110px;
background: #f0f0f0;
width: 530px;
bottom: -30px;
left: 0px;
-moz-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.rm_mask_right{
left:auto;
right:0px;
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
transform:rotate(3deg);
}
.rm_corner_right, .rm_corner_left{
background: #f0f0f0;
position:absolute;
width:200px;
height:100px;
bottom:0px;
left:-65px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.rm_corner_right{
left:auto;
right:-65px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.rm_nav a{
position:absolute;
top:200px;
width:38px;
height:87px;
cursor:pointer;
opacity:0.7;
}
.rm_nav a:hover{
opacity:1.0;
}
.rm_nav a.rm_next{
background:transparent url(../images/next.png) no-repeat top left;
right:0px;
}
.rm_nav a.rm_prev{
background:transparent url(../images/prev.png) no-repeat top left;
left:0px;
}
.rm_controls{
position:absolute;
top:0px;
left:-40px;
height:20px;
}
.rm_controls a{
cursor:pointer;
opacity:0.7;
padding-left:24px;
font-size:16px;
text-transform:uppercase;
height:20px;
float:left;
line-height:20px;
}
.rm_controls a:hover{
opacity:1.0;
}
.rm_controls a.rm_play{
display:none;
background:transparent url(../images/play.png) no-repeat center left;
}
.rm_controls a.rm_pause{
background:transparent url(../images/pause.png) no-repeat center left;
}
/* Footer Style */
.footer{
position:fixed;
bottom:0px;
left:0px;
width:100%;
font-size:13px;
background:#000;
opacity:0.9;
height:20px;
padding-bottom:5px;
text-transform:uppercase;
z-index:4;
}
.footer a{
padding:5px 10px;
letter-spacing:1px;
text-shadow:1px 1px 1px #000;
color:#ddd;
float:right;
}
.footer a:hover{
color:#fff;
}
.footer a span{
font-weight:bold;
}
.footer a.left{
float:left;
}

作者網站：http://tympanus.net/codrops/rotating-image-slider/
檔案大小：333 KB(包含範例)
檔案下載：http://tympanus.net/Tutorials/RotatingImageSlider/RotatingImageSlider.zip
檔案備份：下載