javascript视频教程_简单实用集成的javascript slideshow

天想添加幻灯片标题，寻找一个简单，易于集成的幻灯片，没有浏览器的问题，没有导航栏之类的，只需滑动效果。找了几个发现不具备跨浏览器的问题是，定制性不强，谷歌后了一大圈，终于找到了一个简单实用的易于集成的JavaScript幻灯片 - Slideshow2，一起来看看JavaScript基础教程吧。


Slideshow2是基于Mootools 1.2的.
>>使用方法
引入必要的样式表和js文件，需要引入的文件如下:

初始化

date里写上用于slideshow的图片名称，caption定义和图片一起显示的文字，如果不希望显示文字，留空即可。然后创建一个slideshow的实例，并初始化一些属性。
‘show’是用于显示slideshow的容器的id
data是存储图片的数组
大括号中的是slideshow的属性
Controller:是否显示导航条
hu: 存储图片的路径名称
Thumbnails:是否显示图片缩略图，设为true，会在slideshow底下显示所有幻灯图片的缩略图。可以点击浏览幻灯片。
相应的html代码如下

>>如何定义过渡效果
打开源文件包的js文件夹，会发现除了slideshow.js以外还有几个js，分别是slideshow.flash.js、slideshow.fold.js、slideshow.kenburns.js、slideshow.push.js，每一个js都代表着一个过渡效果，使用方法也很简单，这些js类都是slideshow的扩展类，使用的时候只需要在头部引入相应的类，例如kenburns效果
在header的

后面加一句


因为这是扩展类，所以一定要引入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。
更多javascript视频教程相关的内容可登陆课课家在线学习平台进行查询观看学习！猜您感兴趣的网络课程：| JavaScript Ajax JQuery-javascript视频教程 |