天想添加幻灯片标题,寻找一个简单,易于集成的幻灯片,没有浏览器的问题,没有导航栏之类的,只需滑动效果。找了几个发现不具备跨浏览器的问题是,定制性不强,谷歌后了一大圈,终于找到了一个简单实用的易于集成的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视频教程 |