Nivoslider多种焦点图切换效果

Nivoslider是一款能实现多种切换效果的图片切换插件，能和flash焦点图切换相媲美。Nivoslider为我们提供了十几种切换效果，支持多种参数配置和方法函数调用，而且非常简洁方便。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：图片代码 > 图片轮播难易：初级

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 30 积分

HTML

首先我们放置多张图片：

<div id="slider" class="nivoSlider">
    <img src="images/s1.jpg" alt="" title="非常可爱的狗狗..." />
    <a href="http://www.erdangjiade.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	当加载完成时，回调函数	-

Nivoslider多种焦点图切换效果 收藏

HTML

jQuery

nivoSlider相关参数：

Nivoslider多种焦点图切换效果
收藏