今天想加一個slideshow header，想找一個簡單容易集成的slideshow，不要有浏覽器問題，不要有導航條之類的，只是簡單的幻燈片效果。找了幾個發現不是有cross browser問題就是定制化能力不強，google一大圈後，終於發現了一個簡單實用容易集成的javascript slideshow——Slideshow2，一起來看看吧。
Slideshow2是基於Mootools 1.2的
>>使用方法
引入必要的樣式表和js文件，需要引入的文件如下:
<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
初始化
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'1.jpg': { caption: '' },
'2.jpg': { caption: 'A Ceibu tree.' },
'3.jpg': { caption: 'The view from Volcano Maderas.' },
'4.jpg': { caption: 'Beer and ice cream.' }
};
var myShow = new Slideshow('show', data, {controller: false, height: 300, hu: 'images/', thumbnails: false, width: 400});
});
//]]>
</script>
date裡寫上用於slideshow的圖片名稱，caption定義和圖片一起顯示的文字，如果不希望顯示文字，留空即可。然後創建一個slideshow的實例，並初始化一些屬性。
‘show’是用於顯示slideshow的容器的id
data是存儲圖片的數組
大括號中的是slideshow的屬性
Controller:是否顯示導航條
hu: 存儲圖片的路徑名稱
Thumbnails:是否顯示圖片縮略圖，設為true，會在slideshow底下顯示所有幻燈圖片的縮略圖。可以點擊浏覽幻燈片。
相應的html代碼如下
<div id="show" class="slideshow">
<img src="images/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />
</div>
>>如何定義過渡效果
打開源文件包的js文件夾，會發現除了slideshow.js以外還有幾個js，分別是slideshow.flash.js、slideshow.fold.js、slideshow.kenburns.js、slideshow.push.js，每一個js都代表著一個過渡效果，使用方法也很簡單，這些js類都是slideshow的擴展類，使用的時候只需要在頭部引入相應的類，例如kenburns效果
在header的<script type="text/javascript" src="js/slideshow.js"></script>後面加一句
<script type="text/javascript" src="js/slideshow.kenburns.js"></script>
因為這是擴展類，所以一定要引入slideshow.js只有再引入這個文件
初始化語句改為
var myShow = new Slideshow.Kenburns('show', data, {controller: false, height: 300, hu: 'images/', thumbnails: false, width: 400});
只需要在Slideshow後面加上相應的效果名，名稱大寫，無需更改任何參數。
>>參數簡單列舉
delay：（整數，默認2000），幻燈片停留時間，單位是毫秒
duration：（整數，默認750），幻燈片切換時間，即切換效果所花費的時間，單位毫秒
loop：是否循環播放，默認true
random：是否隨機播放，默認false
titles：是否將captions內容用作幻燈圖片和縮略圖的title屬性
transition：過渡效果，默認是Sine，可選效果有Flash、Kenburns、Push和Fold。