Nivoslider是一款能实现多种切换效果的图片切换插件，能和flash焦点图切换相媲美。Nivoslider为我们提供了十几种切换效果，支持多种参数配置和方法函数调用，而且非常简洁方便。
淘建站为您提供更多_图片代码_图片轮播_焦点图_切换，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 153 次
打赏作者
觉得不错，可打赏下作者
下载资源
免费共享
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
HTML
首先我们放置多张图片：
<div id="slider" class="nivoSlider">
<img src="images/s1.jpg" alt="" title="非常可爱的狗狗..." />
<a href="http://www.sucaiq.com">
<img src="images/s2.jpg" alt="" title="" />
</a>
<img src="images/s3.jpg" alt="" title="#htmlcaption" />
</div>接着我们引用jQuery和nivoSlider插件：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>jQuery
调用nivoSlider插件非常简单：
$(function() {
$('#slider').nivoSlider();
});nivoSlider相关参数：
| 参数 | 描述 | 默认值 |
| effect | 丰富的图片切换效果。：'sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft', 'sliceUpDown','sliceUpDownLeft', 'fold','fade','slideInRight','slideInLeft'，诸如渐入渐出，滑动，百叶窗等等都有。 | random |
| animSpeed | 图片切换速度（毫秒） | 500 |
| pauseTime | 图片停留时间（毫秒） | 3000 |
| startSlide | 开始切换的位置（即从第几张图开始切换）。 | 0 |
| directionNav | 是否使用左右按钮导航 | true |
| directionNavHide | 是否当鼠标滑上图片时出现左右导航按钮 | true |
| controlNav | 是否使用导航控制条，即显示每张图片的按钮 | true |
| controlNavThumbs | 是否使用缩略图控制导航 | false |
| controlNavThumbsFromRel | 是否使用图片的rel属性关联缩略图 | false |
| controlNavThumbsSearch | 缩略图类型 | '.jpg' |
| controlNavThumbsReplace | 缩略图后缀 | '_thumb.jpg' |
| keyboardNav | 是否支持键盘方向键切换（貌视IE不支持） | true |
| pauseOnHover | 当鼠标滑向图片时，停止切换 | true |
| manualAdvance | 是否不自动切换，当为true时，需要手动切换 | false |
| captionOpacity | 设置图片标题说明的背景透明度 | 0.8 |
| 方法：beforeChange | 当发生切换前，回调函数 | - |
| 方法：afterChange | 当发生切换后，回调函数 | - |
| 方法：slideshowEnd | 完成所有的切换动作后，回调函数 | - |
| 方法：lastSlide | 切换最后一张图片时，回调函数 | - |
| 方法：afterLoad | 当加载完成时，回调函数 | - |
