Nivo Slider号称世界最棒的轻量级JQuery图片幻灯插件，按它的官网所说，“以漂亮和易于使用而闻名于世”！有独立的 jQuery 插件和 WordPress 插件两个版本

jQuery 独立版本的插件主要有如下特色：

• ✓  16个独特的过渡效果

• ✓  简洁和有效的标记

• ✓  加载参数设置

• ✓  内置方向和导航控制

• ✓  压缩版本大小只有12KB

• ✓  支持链接图像

• ✓  支持 HTML 标题

• ✓  3套精美光滑的主题

• ✓  在MIT许可下免费使用

• ✓  支持响应式设计

示例代码：

类库引用：

<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script><script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>

调用代码：

$(window).load(function() {  $('#slider').nivoSlider();});

你可以自定义如下选项：

• effect: 设置幻灯变化效果，可以使用’random’, 或者指定效果如, ‘fold,fade,sliceDown’

• slices: slice动画效果参数

• boxCols: box动画效果参数

• boxRows:box动画效果参数

• animSpeed: 动画变化速度

• pauseTime: 每个幻灯时间

• startSlide: 起始幻灯

• directionNav: 是否显示“上一个”和“下一个”导航

• directionNavHide: 是否悬浮显示导航

• controlNav: 是否显示导航控制

• controlNavThumbs: 导航是否使用缩略图

• controlNavThumbsFromRel: 是否让图片使用rel

• controlNavThumbsSearch: 导航缩略图后缀

• controlNavThumbsReplace: 导航缩略图替换

• keyboardNav: 是否键盘导航

• pauseOnHover: 悬浮是否停止

• manualAdvance: 是否手动变化幻灯

• captionOpacity: 标题透明度

• prevText: 上一张文字设定

• nextText: 下一张文字设定

• randomStart: 是否随机开始

• beforeChange: 函数，在幻灯变化前调用

• afterChange:函数，在幻灯变化后调用

• slideshowEnd:函数，在幻灯变化完成调用

• lastSlide:函数，在最后一个幻灯变化完成调用

• afterLoad: 函数，slider加载后调用

　　代码示例：

<script type="text/javascript">$(window).load(function() {    $('#slider').nivoSlider({        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'        slices: 15, // For slice animations        boxCols: 8, // For box animations        boxRows: 4, // For box animations        animSpeed: 500, // Slide transition speed        pauseTime: 3000, // How long each slide will show        startSlide: 0, // Set starting Slide (0 index)        directionNav: true, // Next & Prev navigation        directionNavHide: true, // Only show on hover        controlNav: true, // 1,2,3... navigation        controlNavThumbs: false, // Use thumbnails for Control Nav        controlNavThumbsFromRel: false, // Use image rel for thumbs        controlNavThumbsSearch: '.jpg', // Replace this with...        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src        keyboardNav: true, // Use left & right arrows        pauseOnHover: true, // Stop animation while hovering        manualAdvance: false, // Force manual transitions        captionOpacity: 0.8, // Universal caption opacity        prevText: 'Prev', // Prev directionNav text        nextText: 'Next', // Next directionNav text        randomStart: false, // Start on a random slide        beforeChange: function(){}, // Triggers before a slide transition        afterChange: function(){}, // Triggers after a slide transition        slideshowEnd: function(){}, // Triggers after all slides have been shown        lastSlide: function(){}, // Triggers when last slide is shown        afterLoad: function(){} // Triggers when slider has loaded    });});</script>

HTML代码：

<div class="slider-wrapper theme-default">    <div class="ribbon"></div>    <div id="slider" class="nivoSlider">        <img src="images/toystory.jpg" alt=""/>        <a rel="nofollow"  title="http://dev7studios.com"  target="_bank" href="http://www.banghui.org/go?url=aHR0cCUzQSUyRiUyRmRldjdzdHVkaW9zLmNvbQ=="><img src="images/up.jpg" alt="" title="This is an example of a caption"/></a>        <img src="images/walle.jpg" alt="" data-transition="slideInLeft"/>        <img src="images/nemo.jpg" alt="" title="#htmlcaption"/>    </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></div>

如何为每一个幻灯自定义变化效果：

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft"/>

希望大家喜欢！ 

官网地址：http://dev7studios.com/plugins/nivo-slider 

插件下载：http://dev7studios.com/downloads/63 

效果演示：http://demo.dev7studios.com/nivo-slider

本站下载：

本站下载（提取码：6cc9）