转自用户zhuxiandan
现在市面上基于jQuery的轮播图插件种类繁多，各具特色，这对于具有选择困难症的童鞋来说就痛苦了，不知道选哪个，那么，今天小编就来帮你选择一款，号称最好的jquery幻灯片插件，Nivo-Slider,这款插件无论是在交互效果，还是轮播效果，还是使用方法及功能都堪称完美。其效果可与Flash的幻灯片媲美，例如： 这个flash的幻灯显示
主要特性：
号称世界最棒的jQuery幻灯插件16种幻灯变化的特效 简单并且配置灵活体积小并且符合语义jQuery插件使用免费（但是wordpress插件需要付费：20美元） 使用方法：1.引入以下js文件和CSS文件
[html] view plain copy print ? <link rel="stylesheet" href="css/nivo-slider.css" media="screen"> <script type="text/javascript" src="asserts/jquery/jquery-1.4.3.min.js"></script> <script src="asserts/jquery.nivo.slider.pack.js"></script> 标注：我测试了以下，该插件目前只支持1.4.3版本的JQuery库，用其他的库的话可能会出现异常（亲测有效）2.在head标签中加入以下js代码
[html] view plain copy print ? <script> $(window).load(function () { $('#slider').nivoSlider({ effect:'sliceUp', //此参数可自选 controlNavThumbs:true //此参数可自选 }) }) </script> 标注：该插件提供的方法中提供了诸多参数，供用户自由选择使用，视具体情况3.在body中加入以下格式的html代码
[html] view plain copy print ? <div class="slider-wrapper"> <ul class="nivoSlider" id="slider"> <!--此处的类名为必需，不可更改为其他的，若要更改，须先更改引入的CSS文件中的类名，不建议这么做--> <li><img src="images/nemo.jpg" alt="img1" title="I am a Bird" data-transition="sliceUp" ></li> <!--data-transition自定义动画效果--> <li><img src="images/up.jpg" alt="img2"></li> <li><img src="images/toystory.jpg" alt="img3"></li> <li><img src="images/walle.jpg" alt="img4"></li> </ul> </div>
至此，就完成了一个简约的轮播图了，如还要加工成你想要的效果，就自己在CSS里修饰了。
此外，你还可以自定义一些选项参数：
effect: 设置幻灯变化效果，可以使用'random', 或者指定效果如, 'fold,fade,sliceDown'slices: slice动画效果参数boxCols: box动画效果参数boxRows:box动画效果参数animSpeed: 动画变化速度pauseTime: 每个幻灯时间startSlide: 起始幻灯directionNav: 是否显示“上一个”和“下一个”导航directionNavHide: 是否悬浮显示导航controlNav: 是否显示导航控制controlNavThumbs: 导航是否使用缩略图controlNavThumbsFromRel: 是否让图片使用relcontrolNavThumbsSearch: 导航缩略图后缀controlNavThumbsReplace: 导航缩略图替换keyboardNav: 是否键盘导航pauseOnHover: 悬浮是否停止manualAdvance: 是否手动变化幻灯captionOpacity: 标题透明度prevText: 上一张文字设定nextText: 下一张文字设定randomStart: 是否随机开始beforeChange: 函数，在幻灯变化前调用afterChange:函数，在幻灯变化后调用slideshowEnd:函数，在幻灯变化完成调用lastSlide:函数，在最后一个幻灯变化完成调用afterLoad: 函数，slider加载后调用 代码示例：[html] view plain copy print ? <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> effect属性有十六种效果，默认为random（随机切换效果）： randomsliceDownsliceDownLeftsliceUpsliceUpLeftsliceUpDownsliceUpDownLeftfoldfadeslideInRightslideInLeftboxRandomboxRainboxRainReverseboxRainGrowboxRainGrowReverse 如果你想为每一张图片自定义轮播效果： [html] view plain copy print ? <img src="images/slide1.jpg" alt="" data-transition="slideInLeft"/> <!--使用data-transition设置即可--> 他的使用方法就全部介绍完了，完美！ 最后附上下载链接：http://pan.baidu.com/s/1pLTxhqj 提取密码：nsmf
