图片切换插件Nivo Slider（如何调用jQuery插件学习第八天）
Nivo Slider是一款基于jQuery的多图片切换插件，它的体积非常小(打包后仅有十几KB)，但功能强大，拥有多种图片切换时的动画效果，支持键盘导航和链接影像功能。此外，使用时代码简洁，图片中的标题支持HTML标记并兼容各类浏览器，是一款十分理想的图片切换插件，广泛应用于页面的推荐和广告图片切换。
Nivo Slider插件的使用：
（1）插件文件：
Js-8-8/jquery.nivo.slider.js
Css-8-8/nivo-slider.css
Css-8-8/theme-slider.css
Pic-8-8/全部图片
（2）下载地址：
http://nivo.dev7studios.com
（3）功能描述：
在页面中添加5张图片，通过图片切换插件Nivo Slider实现手动切换或自动播放的效果，同时，再切换图片的下方，单击缩略的小图片同样可以实现图片的浏览或切换效果。
（4）实现代码：
<link href="Css-8-8/nivo-slider.css" rel="stylesheet" type="text/css">
<link href="Css-8-8/theme-default.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Jscript/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(function(){
$('#slider').nivoSlider({
effect:'boxRandom', //图片随机切换效果
beforeChange:function() {}, //图片切换前回调函数
afterLoad:function() {}, //图片加载后回调函数
controlNavThumb:true, //使用缩略图控制导航
manualAdvance:true //需要手动切换
});
});
</script><div class="theme-default">
<div id="slider" class="nivoSlider">
<a href="javascript:">
<img src="Pic-8-8/img01.jpg" alt="01"
data-thumb="Pic-8-8/img01.jpg" title="第一幅图片" />
</a>
<a href="javascript:">
<img src="Pic-8-8/img02.jpg" alt="02"
data-thumb="Pic-8-8/img02.jpg" title="第二幅图片" />
</a>
<a href="javascript:">
<img src="Pic-8-8/img03.jpg" alt="03"
data-thumb="Pic-8-8/img03.jpg" title="第三幅图片" />
</a>
<a href="javascript:">
<img src="Pic-8-8/img04.jpg" alt="04"
data-thumb="Pic-8-8/img04.jpg" title="第四幅图片" />
</a>
<a href="javascript:">
<img src="Pic-8-8/img05.jpg" alt="05"
data-thumb="Pic-8-8/img05.jpg" title="第五幅图片" />
</a>
</div>
</div>（5）代码分析：
在页面中，为了通过插件实现多张图片切换的效果，除在<head>元素中引用jQuery框架外，还需要导入插件的JS文件和与之对应的CSS文件。此外，还要导入一个控制图片导航键和缩略导航图片的样式文件"theme.default.css"，即在<head>元素中加入如下代码：
<link href="Css-8-8/nivo-slider.css" rel="stylesheet" type="text/css">
<link href="Css-8-8/theme-default.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Jscript/jquery.nivo.slider.js"></script>接下来，在ID号为"slider"，类别名为“nivoSlider”的页面<div>元素中，创建<img>元素插入需要切换的图片。如果需要增加图片的超级链接，只要在<img>元素外围再创建一个<a>元素即可。此外，切换图片的标题内容，可以通过设置<img>元素的title属性值来实现，该属性值支持HTML格式，<div>元素中插入切换图片代码：
<img src="Pic-8-8/img01.jpg" alt="01"
data-thumb="Pic-8-8/img01.jpg" title="第一幅图片" />上述代码中，<img>元素的title属性表示切换图片的主题内容，data-thumb属性表示切换图片底部导航的路径，通常与src属性值相同。完成导入与图片切换插件相关的JS框架和创建相应页面元素操作之后，就是编写JavaScript代码，调用JS插件中的方法，其调用格式如下：
$(图片集合外围元素).nivoSilder(options);通过上述调用格式与页面中的切换图片元素相绑定，其实现代码如下：
$(function(){
$('#slider').nivoSlider({
effect:'boxRandom', //图片随机切换效果
beforeChange:function() {}, //图片切换前回调函数
afterLoad:function() {}, //图片加载后回调函数
controlNavThumb:true, //使用缩略图控制导航
manualAdvance:true //需要手动切换
});
});在上述代码中，ID号为"slider"的元素调用图片切换插件中的nivoSlider()方法。在调用时，设置了图片切换时的一些基本效果。如"effect"表示图片切换时的效果属性，该值为"boxRandom"表示随机效果；"controlNavThumbs"表示图片切换时是否要显示缩略图导航条，"true"表示需要显示，"false"表示不需要，默认值为"false"，即通过对应小园圈作为图片切换的导航条。
此外，在调用图片切换插件的nivoSlider方法时，括号中的参数options是一个对象集合，它包含了多个属性和事件，如下表：
| 参数名称 | 功能描述 |
| effect | 图片切换效果，目前支持11种效，如"sliceDownRight"，"sliceDownLeft"，"sliceUpRight"，"sliceUpDown"，"sliceUpDownLeft"，"fold"，"fade"，"slideInRight"，"slideInLeft"，"boxRandom"默认random。 |
| animSpeed | 图片切换时的速度，没人单位是毫秒，默认值为500。 |
| pauseTime | 图片切换时停留的时间，默认单位是毫秒，默认值为3000。 |
| startSlide | 图片开始切换的位置，表示从第几张图片开始切换，默认值为0。 |
| directionNav | 是否切换图片中使用左右按钮导航，默认值为true。 |
| directionNavHide | 当鼠标移动至切换图片中时，是否显示左右按钮导航，默认值为true。 |
| pauseOnHide | 当鼠标移动至切换图片中时，是否停止切换效果，默认值为true。 |
| controlNav | 在切换图片的底部，是否显示图片导航条，默认值为true。 |
| controlNavThumbs | 在切换图片的底部，是否显示带缩略图片的导航条，默认值为false。 |
| controlNavThumbsFormRel | 是否使用切换图片的rel属性关联缩略图，默认值为false。 |
| controlNavThumbsSearch | 导航条中缩略图片的类型，默认值为".jpg"。 |
| controlNavThumbsReplace | 导航条中缩略图片的扩展名格式，默认值为"_thimb.jpg"。 |
| keyboardNav | 是否支持键盘中的方向键实现图片切换功能，默认值为true。 |
| manualAdvance | 是否手动切换图片，默认值为false。 |
| captionOpacity | 设置图片标题内容的背景透明度，默认值为0.8。 |
| beforeChange | 回调函数，当发生切换之前触发。 |
| afterChange | 回调函数，当发生切换之后触发。 |
| slideshowEnd | 回调函数，完全所有图片切换之后触发。 |
| lastSlide | 回调函数，切换最后一张图片时触发。 |
| afterLoad | 回调函数，当整个切换图片加载完成后触发。 |