当前位置: 首页 > 工具软件 > Nivo Slider > 使用案例 >

JQuery插件之(四)--轮播图nivo-slider使用教程

缪升
2023-12-01

现在市面上基于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>  
标注:我测试了以下,该插件目前只支持1.4.3版本的JQuery库,用其他的库的话可能会出现异常(亲测有效)

2.在head标签中加入以下js代码

[html]  view plain  copy
 print ?
  1. <script>  
  2.       $(window).load(function () {  
  3.           $('#slider').nivoSlider({  
  4.               effect:'sliceUp',   //此参数可自选  
  5.               controlNavThumbs:true   //此参数可自选  
  6.           })  
  7.       })  
  8. </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>  


至此,就完成了一个简约的轮播图了,如还要加工成你想要的效果,就自己在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() {  
  3.     $('#slider').nivoSlider({  
  4.         effect: 'random', // Specify sets like: 'fold,fade,sliceDown'  
  5.         slices: 15, // For slice animations  
  6.         boxCols: 8, // For box animations  
  7.         boxRows: 4, // For box animations  
  8.         animSpeed: 500, // Slide transition speed  
  9.         pauseTime: 3000, // How long each slide will show  
  10.         startSlide: 0, // Set starting Slide (0 index)  
  11.         directionNav: true, // Next & Prev navigation  
  12.         directionNavHide: true, // Only show on hover  
  13.         controlNav: true, // 1,2,3... navigation  
  14.         controlNavThumbs: false, // Use thumbnails for Control Nav  
  15.         controlNavThumbsFromRel: false, // Use image rel for thumbs  
  16.         controlNavThumbsSearch: '.jpg', // Replace this with...  
  17.         controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src  
  18.         keyboardNav: true, // Use left & right arrows  
  19.         pauseOnHover: true, // Stop animation while hovering  
  20.         manualAdvance: false, // Force manual transitions  
  21.         captionOpacity: 0.8, // Universal caption opacity  
  22.         prevText: 'Prev', // Prev directionNav text  
  23.         nextText: 'Next', // Next directionNav text  
  24.         randomStart: false, // Start on a random slide  
  25.         beforeChange: function(){}, // Triggers before a slide transition  
  26.         afterChange: function(){}, // Triggers after a slide transition  
  27.         slideshowEnd: function(){}, // Triggers after all slides have been shown  
  28.         lastSlide: function(){}, // Triggers when last slide is shown  
  29.         afterLoad: function(){} // Triggers when slider has loaded  
  30.     });  
  31. });  
  32. </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设置即可-->  

他的使用方法就全部介绍完了,完美!
最后附上下载链接:http://pan.baidu.com/s/1pLTxhqj  提取密码:nsmf

 类似资料: