簡單實用容易集成的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。