一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

基于jQuery Nivo Slider幻灯插件

时间:2011-11-24 编辑:简简单单 来源:一聚教程网

主要特性:

号称世界最棒的jQuery幻灯插件

16种幻灯变化的特效 

简单并且配置灵活

体积小并且符合语义

jQuery插件使用免费(但是wordpress插件需要付费:20美元)

 

这里我稍微说一下,jQuery的插件到处都有,我们需要有目的的选择一下插件,这个网站拥有自己独立的网站,网站非常正规,别的不说,使用着就放心。而且有技术支持团队,不过只支持付费用户。幻灯效果和效率都不错,堪比flash的幻灯。例如, 这个flash的幻灯显示。

Javascript代码

类库引用:

 代码如下 复制代码


调用代码:

 代码如下 复制代码

$(window).load(function() {
    $('#slider').nivoSlider();
});

你可以自定义如下选项:

effect: 设置幻灯变化效果,可以使用'random', 或者指定效果如, 'fold,fade,sliceDown'

slices: slice动画效果参数

boxCols: box动画效果参数

boxRows:box动画效果参数

animSpeed: 动画变化速度

pauseTime: 每个幻灯时间

startSlide: 起始幻灯

directionNav: 是否显示“上一个”和“下一个”导航

directionNavHide: 是否悬浮显示导航

controlNav: 是否显示导航控制

controlNavThumbs: 导航是否使用缩略图

controlNavThumbsFromRel: 是否让图片使用rel

controlNavThumbsSearch: 导航缩略图后缀

controlNavThumbsReplace: 导航缩略图替换

keyboardNav: 是否键盘导航

pauseOnHover: 悬浮是否停止

manualAdvance: 是否手动变化幻灯

captionOpacity: 标题透明度

prevText: 上一张文字设定

nextText: 下一张文字设定

randomStart: 是否随机开始

beforeChange: 函数,在幻灯变化前调用

afterChange:函数,在幻灯变化后调用

slideshowEnd:函数,在幻灯变化完成调用

lastSlide:函数,在最后一个幻灯变化完成调用

afterLoad: 函数,slider加载后调用

 

代码示例:

 代码如下 复制代码


HTML代码

 代码如下 复制代码


   

   

       
       
       
       
   

   

        This is an example of a HTML caption with a link.
   


如何为每一个幻灯自定义变化效果:

 代码如下 复制代码

 

热门栏目