Nivo-Slider是一款非常强大的响应式jQuery幻灯片插件。该幻灯片插件内置有16种不同的动画过渡效果。它提供了丰富的参数来控制幻灯片的播放。它使用简单,并且可以兼容IE8浏览器。
使用方法
使用Nivo-Slider幻灯片需要引入nivo-slider.css,jQuery(1.7+)和jquery.nivo.slider.js文件。
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" /> <script src=js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.nivo.slider.js" type="text/javascript"></script>
HTML结构
该响应式幻灯片的HTML结构非常简单,使用一个带#slider
的<div>
作为容器,里面放置你需要的图片即可。
<div id="slider" class="nivoSlider"> <img src="images/slide1.jpg" alt="" /> <a href="#"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a> <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> <img src="images/slide4.jpg" alt="" /> </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>
最好在包裹容器上添加class nivoSlider
。上面的代码中还展示了如何为图标添加可以带HTML标签的标题效果(例如超链接)。它们的关联关系是在图片的title
属性指向作为图片标签的容器div#htmlcaption
。
调用插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该幻灯片插件。
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script>
$(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
可以设置为以下的动画过渡效果:
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
小技巧
使用幻灯片主题
要使用Nivo Slider幻灯片插件提供的各种主题样式,可以按下面操作。首先在页面中引入主题CSS文件。
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" />
然后需要按下面的格式调整一些你的HTML标签。
<div class="slider-wrapper theme-default"> <div class="ribbon"></div> <div id="slider" class="nivoSlider"> ... </div> </div>
注意,你可以在页面中引入多个主题CSS样式文件,但是它们不会被显示,直到你在幻灯片包裹容器上设置theme-{theme name}
后,该主题才会被启用。
使用缩略图导航
要使用缩略图导航必须确保controlNavThumbs
参数设置为true
。该参数被启用后,插件会检查图片的data-thumb
属性,使用该属性中指定的图片URL作为缩略图。
<div id="slider"> <img src="images/1.jpg" alt="" data-thumb="images/1_thumb.jpg" /> <img src="images/2.jpg" alt="" data-thumb="images/2_thumb.jpg" /> <img src="images/3.jpg" alt="" data-thumb="images/3_thumb.jpg" /> <img src="images/4.jpg" alt="" data-thumb="images/4_thumb.jpg" /> </div>
自定义每一个slide的动画过渡效果
你可以使用data-transition
属性为幻灯片的每一个slide指定它的过渡动画效果,例如:
<img src="images/slide1.jpg" alt="" data-transition="slideInLeft" />
上面的代码会强制该slide在每次出现的时候都使用slideInLeft
过渡动画。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!