Javascript

简单实用容易集成的javascript slideshow

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

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

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

>>使用方法

引入必要的样式表和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。

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

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

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