YUI Slideshow 圖片展示櫃

YUI Slideshow 是基於 YUI3 框架所製作而成的圖片展示櫃套件，主要的功能是讓您在設計網站的時候，能夠簡單方便的將所有的 HTML 元素的子元素組成一個可定制的展示櫃動畫。YUI 可能有些人不知道是什麼 Yahoo! UI Library 這是框架的全名，這樣一看就知道了，簡單的說就是 Yahoo 開發的 JavaScript 框架。

使用方法：
第一步 載入 YUI Slideshow 的 JavaScript 檔案
<!-- 載入 YUI 的主程式碼-->
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>


第二步 寫入 HTML 圖片展示的框架
<div id="slideshow1" class="slideshow">
    <img src="/ys/cave.jpg" alt="Cave" />
    <img src="/ys/planet.jpg" alt="Planet" />
    <img src="/ys/sunset.jpg" alt="Sunset" />
</div>

第三步 設計圖片展示櫃的 CSS 樣式
.slideshow img {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

第四步 寫入部分 JavaScript 程式碼
YUI({
gallery: 'gallery-2011.04.20-13-04' // Last Gallery Build of this module.
}).use('gallery-yui-slideshow', function(Y) {
// Your code here.
});
var slideshow = new Y.Slideshow({ srcNode: '#slideshow1' });


附上 YUI Slideshow 可修改參數表

參數	類型	預設	說明
transition	物件	Y.Slideshow.PRESETS.fade	動畫的類型
easing	字串	ease-out	CSS 動畫的方式
interval	整數	4	自動撥放的間隔時間.以秒為單位
duration	單精數	0.5	動畫撥放的時間.以秒為單位
autoplay	布林	true	是否自動撥放
previousButton	字串	null	前一張按鈕
nextButton	字串	null	後一張按鈕
playButton	字串	null	開始自動撥放按鈕
pauseButton	字串	null	停止自動撥放按鈕

作者網站：http://freshcutsd.com/yui-slideshow/
檔案大小：21.7 KB
檔案下載：http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js