Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

Nivo Slider号称世界最棒的轻量级JQuery图片幻灯插件，按它的官网所说，“以漂亮和易于使用而闻名于世”！有独立的 jQuery 插件和 WordPress 插件两个版本。jQuery 独立版本的插件主要有如下特色：

✓  16个独特的过渡效果

✓  简洁和有效的标记

✓  加载参数设置

✓  内置方向和导航控制

✓  压缩版本大小只有12KB

✓  支持链接图像

✓  支持 HTML 标题

✓  3套精美光滑的主题

✓  在MIT许可下免费使用

✓  支持响应式设计

官网地址：http://dev7studios.com/plugins/nivo-slider

插件下载：http://dev7studios.com/downloads/63

效果演示：http://demo.dev7studios.com/nivo-slider

示例代码：

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代码

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

希望大家喜欢！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。