基于JQuery的轮播图插件nivo-slider使用教程

现在市面上基于jQuery的轮播图插件种类繁多，各具特色，这对于具有选择困难症的童鞋来说就痛苦了，不知道选哪个，那么，今天小编就来帮你选择一款，号称最好的jquery幻灯片插件，Nivo-Slider,这款插件无论是在交互效果，还是轮播效果，还是使用方法及功能都堪称完美。其效果可与Flash的幻灯片媲美，例如： 这个flash的幻灯显示

主要特性：

• 号称世界最棒的jQuery幻灯插件
• 16种幻灯变化的特效 
• 简单并且配置灵活
• 体积小并且符合语义
• jQuery插件使用免费（但是wordpress插件需要付费：20美元）

使用方法：

1.引入以下js文件和CSS文件

[html] view plain copy

print ?

1. <link rel=“stylesheet” href=“css/nivo-slider.css” media=“screen”>  
2. <script type=“text/javascript” src=“asserts/jquery/jquery-1.4.3.min.js”></script>  
3. <script src=“asserts/jquery.nivo.slider.pack.js”></script>  

<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 ?

1. <script>  
2.       $(window).load(function&nbsp;()&nbsp;{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(‘#slider’).nivoSlider({  
3.               effect:’sliceUp’,   //此参数可自选  
4.               controlNavThumbs:true   //此参数可自选  
5.           })  
6.       })  
7. </script>  

<script>
      $(window).load(function () {
          $('#slider').nivoSlider({
              effect:'sliceUp',   //此参数可自选
              controlNavThumbs:true   //此参数可自选
          })
      })
</script>

标注：该插件提供的方法中提供了诸多参数，供用户自由选择使用，视具体情况

3.在body中加入以下格式的html代码

[html] view plain copy

print ?

1. <div class=“slider-wrapper”>  
2.    <ul  class=“nivoSlider” id=“slider”>  <!–此处的类名为必需，不可更改为其他的，若要更改，须先更改引入的CSS文件中的类名，不建议这么做–>  
3.       <li><img src=“images/nemo.jpg” alt=“img1” title=“I am a Bird” data-transition=“sliceUp” ></li> <!–data-transition自定义动画效果–>  
4.       <li><img src=“images/up.jpg” alt=“img2”></li>  
5.       <li><img src=“images/toystory.jpg” alt=“img3”></li>  
6.       <li><img src=“images/walle.jpg” alt=“img4”></li>  
7.    </ul>  
8. </div>  

<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: 是否让图片使用rel
• controlNavThumbsSearch: 导航缩略图后缀
• controlNavThumbsReplace: 导航缩略图替换
• keyboardNav: 是否键盘导航
• pauseOnHover: 悬浮是否停止
• manualAdvance: 是否手动变化幻灯
• captionOpacity: 标题透明度
• prevText: 上一张文字设定
• nextText: 下一张文字设定
• randomStart: 是否随机开始
• beforeChange: 函数，在幻灯变化前调用
• afterChange:函数，在幻灯变化后调用
• slideshowEnd:函数，在幻灯变化完成调用
• lastSlide:函数，在最后一个幻灯变化完成调用
• afterLoad: 函数，slider加载后调用

代码示例：

[html] view plain copy

print ?

1. <script type=“text/javascript”>  
2. $(window).load(function()&nbsp;{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;$(‘#slider’).nivoSlider({  
3.         effect: ‘random’, // Specify sets like: ‘fold,fade,sliceDown’  
4.         slices: 15, // For slice animations  
5.         boxCols: 8, // For box animations  
6.         boxRows: 4, // For box animations  
7.         animSpeed: 500, // Slide transition speed  
8.         pauseTime: 3000, // How long each slide will show  
9.         startSlide: 0, // Set starting Slide (0 index)  
10.         directionNav: true, // Next & Prev navigation  
11.         directionNavHide: true, // Only show on hover  
12.         controlNav: true, // 1,2,3… navigation  
13.         controlNavThumbs: false, // Use thumbnails for Control Nav  
14.         controlNavThumbsFromRel: false, // Use image rel for thumbs  
15.         controlNavThumbsSearch: ’.jpg’, // Replace this with…  
16.         controlNavThumbsReplace: ‘_thumb.jpg’, // …this in thumb Image src  
17.         keyboardNav: true, // Use left & right arrows  
18.         pauseOnHover: true, // Stop animation while hovering  
19.         manualAdvance: false, // Force manual transitions  
20.         captionOpacity: 0.8, // Universal caption opacity  
21.         prevText: ‘Prev’, // Prev directionNav text  
22.         nextText: ‘Next’, // Next directionNav text  
23.         randomStart: false, // Start on a random slide  
24.         beforeChange: function(){}, // Triggers before a slide transition  
25.         afterChange: function(){}, // Triggers after a slide transition  
26.         slideshowEnd: function(){}, // Triggers after all slides have been shown  
27.         lastSlide: function(){}, // Triggers when last slide is shown  
28.         afterLoad: function(){} // Triggers when slider has loaded  
29.     });  
30. });  
31. </script>  

<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（随机切换效果）：

• random
• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• fade
• slideInRight
• slideInLeft
• boxRandom
• boxRain
• boxRainReverse
• boxRainGrow
• boxRainGrowReverse

如果你想为每一张图片自定义轮播效果：

[html] view plain copy

print ?

1. <img src=“images/slide1.jpg” alt=“” data-transition=“slideInLeft”/> <!–使用data-transition设置即可–>  

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft"/> <!--使用data-transition设置即可-->

他的使用方法就全部介绍完了，完美！

最后附上下载链接：http://pan.baidu.com/s/1pLTxhqj  提取密码：nsmf