Nivo-Slider是一款非常强大的响应式jQuery幻灯片插件。该幻灯片插件内置有16种不同的动画过渡效果。它提供了丰富的参数来控制幻灯片的播放。它使用简单，并且可以兼容IE8浏览器。
在线预览 源码下载
使用方法使用Nivo-Slider幻灯片需要引入nivo-slider.CSS，jQuery(1.7+)和jquery.nivo.slider.js文件。
1
2
3
<linkrel="stylesheet"href="css/nivo-slider.css"type="text/css"/>
<scriptsrc=js/jquery.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.nivo.slider.js"type="text/Javascript"></script>
HTML结构该响应式幻灯片的HTML结构非常简单，使用一个带#slider的<div>作为容器，里面放置你需要的图片即可。
1
2
3
4
5
6
7
8
9
<divid="slider"class="nivoSlider">
<imgsrc="images/slide1.jpg"alt=""/>
<ahref="#"><imgsrc="images/slide2.jpg"alt=""title="#htmlcaption"/></a>
<imgsrc="images/slide3.jpg"alt=""title="This is an example of a caption"/>
<imgsrc="images/slide4.jpg"alt=""/>
</div>
<divid="htmlcaption"class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <ahref="#">a link</a>.
</div>
最好在包裹容器上添加class nivoSlider。上面的代码中还展示了如何为图标添加可以带HTML标签的标题效果（例如超链接）。它们的关联关系是在图片的title属性指向作为图片标签的容器div#htmlcaption。
调用插件在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该幻灯片插件。
1
2
3
4
5
<scripttype="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
注意Nivo Slider幻灯片插件使用$(window).load()函数而不是$(document).ready()函数，这与其它jQuery插件的使用有所不同。
配置参数下面是该响应式幻灯片的可用配置参数。
参数
默认值
描述
effect
'random'
幻灯片的过渡动画效果，可以指定类似：'fold,fade,sliceDown'
slices
15
slice动画过渡的配置
boxCols
8
box动画过渡的配置
boxRows
4
box动画过渡的配置
animSpeed
500
幻灯片过渡动画的时间
pauseTime
3000
每一个幻灯片slide显示的时间
startSlide
0
幻灯片开始的slide的序号
directionNav
true
是否显示next/PRev导航
controlNav
true
是否显示圆点导航
controlNavThumbs
false
使用图片缩略图来代替圆点导航按钮
pauSEOnHover
true
在鼠标滑过幻灯片时是否暂停播放
manualAdvance
false
强制手动进行过渡动画
prevText
'Prev'
prev导航按钮上的文本
nextText
'Next'
next导航按钮上的文本
randomStart
false
是否随机开始播放
beforeChange
function(){}
一个slide开始过渡动画之前触发
afterChange
function(){}
一个slide结束过渡动画之后触发
slideshowEnd
function(){}
所有的幻灯片都被显示之后触发
lastSlide
function(){}
最后一个幻灯片slide显示之后触发
afterLoad
function(){}
幻灯片被加载之后触发
effect可以设置为以下的动画过渡效果：
sliceDownsliceDownLeftsliceUpsliceUpLeftsliceUpDownsliceUpDownLeftfoldfaderandomslideInRightslideInLeftboxRandomboxRainboxRainReverseboxRainGrowboxRainGrowReverse 小技巧 使用幻灯片主题要使用Nivo Slider幻灯片插件提供的各种主题样式，可以按下面操作。首先在页面中引入主题CSS文件。
1
<linkrel="stylesheet"href="nivo-slider/themes/default/default.css"type="text/css"/>
然后需要按下面的格式调整一些你的HTML标签。
1
2
3
4
5
6
<divclass="slider-wrapper theme-default">
<divclass="ribbon"></div>
<divid="slider"class="nivoSlider">
...
</div>
</div>
注意，你可以在页面中引入多个主题CSS样式文件，但是它们不会被显示，直到你在幻灯片包裹容器上设置theme-{theme name}后，该主题才会被启用。
使用缩略图导航要使用缩略图导航必须确保controlNavThumbs参数设置为true。该参数被启用后，插件会检查图片的data-thumb属性，使用该属性中指定的图片URL作为缩略图。
1
2
3
4
5
6
<divid="slider">
<imgsrc="images/1.jpg"alt=""data-thumb="images/1_thumb.jpg"/>
<imgsrc="images/2.jpg"alt=""data-thumb="images/2_thumb.jpg"/>
<imgsrc="images/3.jpg"alt=""data-thumb="images/3_thumb.jpg"/>
<imgsrc="images/4.jpg"alt=""data-thumb="images/4_thumb.jpg"/>
</div>
自定义每一个slide的动画过渡效果你可以使用data-transition属性为幻灯片的每一个slide指定它的过渡动画效果，例如：
1
<imgsrc="images/slide1.jpg"alt=""data-transition="slideInLeft"/>
上面的代码会强制该slide在每次出现的时候都使用slideInLeft过渡动画。
via：http://www.w2bc.com/article/the-most-awesome-jquery-image-slider