使用步骤
1、引入css文件
default.css 设置展示插件所需的样式，像控制导航键，导航按钮样式，当然你可以自己写个样式
nivo-slider控制图片样式，插件所需的CSS文件
<link rel="stylesheet" href="default/default.css">
<link rel="stylesheet" href="css/nivo-slider.css">
2、引入js文件
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.nivo.slider.js"></script>
3、在body标签中加入以下格式的html代码
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="data:images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="data:images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="data:images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="data:images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
如果你想给让单击图片时打开一个页面地址，就给图片加个<a>标签链接
如果你想给图片加个标题说明，可以使用title属性，图片下会形成黑色横条
如果你想让标题有样式或者链接，可以将图片的title属性设置为像"#htmlcaption"，即#号后面紧跟指向的ID，如上所示代码，在ID为htmlcaption的DIV中，你可以编辑你想要的HTML代码，Nivoslider插件支持html的图片标题。
4、然后调用Nivoslider插件。
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</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(){} |
示例代码如下：
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
通过data-transition="***"来改变当前图片的切换样式，不写默认是随机
如 <img src="data:image/b1.jpg" data-transition="boxRain"/>
切换效果
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse