简单实用容易集成的javascript slideshow

今天想加一个slideshow header，想找一个简单容易集成的slideshow，不要有浏览器问题，不要有导航条之类的，只是简单的幻灯片效果。找了几个发现不是有cross browser问题就是定制化能力不强，google一大圈后，终于发现了一个简单实用容易集成的javascript slideshow——Slideshow2，一起来看看吧。

Slideshow2是基于Mootools 1.2的，官方网站是

http://www.electricprism.com/aeron/slideshow/

>>使用方法

引入必要的样式表和js文件，需要引入的文件如下:

初始化

//<![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>

>>如何定义过渡效果

打开源文件包的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>后面加一句

因为这是扩展类，所以一定要引入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。

详细参数列表请访问http://code.google.com/p/slideshow/wiki/Slideshow

官方下载地址http://code.google.com/p/slideshow/downloads/list

本地下载[download id="1"]