iCarousel 旋轉燈籠式圖片展示實際執行畫面

Web 開發人員常會遇到很多的連續內容需要展示，有可能是一些文章片段也有可能是一堆圖片等等的，因為有這樣的需求，所以就出現了旋轉方式的展示方式，這一個套件就是幫助開發者擁有豐富的展式介面且容易使用的方法。

使用方法：
首先載入程式必要的檔案
//載入 Mootools 的框架
<script type="text/javascript" src="js/mootools.js"></script>
//載入 iCarousel 主程式碼
<script type="text/javascript" src="js/icarousel.js"></script>


再來編輯 HTML 語法部分
<h3>III. Horizontal images scroller</h3>
<div id="example_3">
    <ul id="example_3_content">
        <li class="example_3_item"><a href="#"><img src="images/flowers/1.jpg" alt="flower 1" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/2.jpg" alt="flower 2" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/3.jpg" alt="flower 3" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/4.jpg" alt="flower 4" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/5.jpg" alt="flower 5" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/6.jpg" alt="flower 6" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/7.jpg" alt="flower 7" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/8.jpg" alt="flower 8" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/9.jpg" alt="flower 9" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/A.jpg" alt="flower A" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/B.jpg" alt="flower B" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/C.jpg" alt="flower C" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/D.jpg" alt="flower D" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/E.jpg" alt="flower E" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/F.jpg" alt="flower F" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/G.jpg" alt="flower G" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/H.jpg" alt="flower H" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/I.jpg" alt="flower I" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/J.jpg" alt="flower J" /></a></li>
        <li class="example_3_item"><a href="#"><img src="images/flowers/K.jpg" alt="flower K" /></a></li>
    </ul>
    <div id="example_3_frame">
        <img id="example_3_previous" src="images/ex3_previous.gif" alt="move previous" />
        <img id="example_3_next" src="images/ex3_next.gif" alt="move next" />
    </div>
</div>

再來在 Header 的部分加上CSS
#example_3 {
    position: relative; /* important */
    overflow: hidden; /* important */
    width: 470px; /* important */
    height: 86px; /* important */
    margin: 0 85px;
    background: #000;
}
#example_3_frame {position: relative}
#example_3_previous {float: left;}
#example_3_next {float: rightright;}
#example_3_content {
    position: absolute;
    top: 0;
    margin-left: 20px;
}
#example_3_content
#example_3_content li {
    list-style: none;
    margin: 0;
    padding: 0;
}
    #example_3_content {
        width: 5418px;
    }
    #container_bd #example_3 ul li {
        display: block;
        float: left;
        margin: 5px;
        padding: 5px;
        border: 1px solid #666;
        background-color: #000;
    }
#container_bd #example_3 ul li img {
    display: block;
}
最後加上 JavaScript 的啟動程式碼就完成了
window.addEvent("domready", function() {
    new iCarousel("example_3_content", {
        idPrevious: "example_3_previous",
        idNext: "example_3_next",
        idToggle: "undefined",
        item: {
            klass: "example_3_item",
            size: 86
        },
        animation: {
            duration: 1000,
            amount: 4
        }
    });
});

附上可修改的屬性

屬性	說明
animation	動畫 type 滑動方式.預設為 fadeNscroll 可設定 fadeNscroll,scroll,fade direction 滑動方向.預設為left 可設定為 left,top amount 一次捲動數量 transition 函式.滑入動作時 duration 滑動一次的秒數.預設為500 單位毫秒 rotate type 自動或手動.預設為手動 manual,auto interval 自動時間隔幾秒.預設為5000單位毫秒 onMouseOver 自動時是否暫停預設為暫停 stop,proceed
item	物件 klass 物件的CLASS.預設為item size 物件的大小.預設為100
idPrevious	上一頁的ID.預設為 previous
idNext	下一頁的ID.預設為 next
idToggle	切換的ID.預設為 toggle

作者網站：http://zendold.lojcomm.com.br/icarousel/
檔案大小：3.40 KB
檔案下載：http://zendold.lojcomm.com.br/icarousel/js/iCarousel.js
檔案備份：下載