引入文件<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen"> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
参数配置
| 参数名 | 参数说明 | 参数类型 | 默认值 |
| effect | 切换样式 | 字符串 | ‘random’ |
| slices | 针对slice样式的切换级数，数字越大切换越慢过渡越小 | 数字 | 15 |
| boxCols | 针对box样式的切换列数，数字越大切换越慢过渡越小 | 数字 | 8 |
| boxRows | 针对box样式的切换行数，数字越大切换越慢过渡越小 | 数字 | 4 |
| animSpeed | 切换动画的速度 | 数字 | 500 |
| pauseTime | 相邻两张幻灯片切换的间隔时间 | 数字 | 3000 |
| startSlide | 从第几张图片开始切换 | 数字 | 0 |
| directionNav | 是否显示‘上一张/下一张’导航 | 布尔值 | true |
| controlNav | 是否显示数字导航 | 布尔值 | true |
| controlNavThumbs | 是否用缩略图导航 | 布尔值 | false |
| pauseOnHover | 当鼠标移到幻灯片上的时候是否暂停切换 | 布尔值 | true |
| manualAdvance | 是否强制手动切换 | 布尔值 | false |
| prevText | ’上一张‘的文字 | 字符串 | ‘Prev’ |
| nextText | ’下一张‘的文字 | 字符串 | ‘Next’ |
| randomStart | 是否从一张随机的图片开始切换 | 布尔值 | false |
| beforeChange | 在幻灯片切换之前的回调函数 | 函数 | function(){} |
| afterChange | 在幻灯片切换之后的回调函数 | 函数 | function(){} |
| slideshowEnd | 在所有幻灯片都切换完毕后的回调函数 | 函数 | function(){} |
| lastSlide | 在最后一张幻灯片显示的回调函数 | 函数 | function(){} |
| afterLoad | 在幻灯片加载完成后的回调函数 | 函数 | function(){} |
切换效果
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
说明：
- Nivo Slider官网地址：http://dev7studios.com/plugins/nivo-slider，可下载最新版本的Nivo Slider；
- JQuery需要v1.7+以上版本，本实例使用的是jQuery v1.10.1。
参考网址：
[1]Nivo Slider 简要使用文档.http://www.2cto.com/kf/201202/119195.html.
[2]基于JQuery Nivo Slider幻灯插件.http://www.111cn.net/wy/jquery/40801.htm.
[3]Nivo Slider官网教程：http://docs.dev7studios.com/jquery-plugins/nivo-slider
时间： 2024-10-30 23:05:25