簡單實用容易整合的javascript slideshow

 今天想加一個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。