基于JQuery的轮播图插件nivo-slider使用教程
来源:互联网 发布:安卓扒谱软件 编辑:程序博客网 时间:2024/05/17 00:05
现在市面上基于jQuery的轮播图插件种类繁多,各具特色,这对于具有选择困难症的童鞋来说就痛苦了,不知道选哪个,那么,今天小编就来帮你选择一款,号称最好的jquery幻灯片插件,Nivo-Slider,这款插件无论是在交互效果,还是轮播效果,还是使用方法及功能都堪称完美。其效果可与Flash的幻灯片媲美,例如: 这个flash的幻灯显示
主要特性:
- 号称世界最棒的jQuery幻灯插件
- 16种幻灯变化的特效
- 简单并且配置灵活
- 体积小并且符合语义
- jQuery插件使用免费(但是wordpress插件需要付费:20美元)
1.引入以下js文件和CSS文件
- <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>
<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代码
- <script>
- (window).load(function () { </span></li><li class="alt"><span> (‘#slider’).nivoSlider({
- effect:’sliceUp’, //此参数可自选
- controlNavThumbs:true //此参数可自选
- })
- })
- </script>
<script> $(window).load(function () { $('#slider').nivoSlider({ effect:'sliceUp', //此参数可自选 controlNavThumbs:true //此参数可自选 }) })</script>标注:该插件提供的方法中提供了诸多参数,供用户自由选择使用,视具体情况
3.在body中加入以下格式的html代码
- <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>
<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>
此外,你还可以自定义一些选项参数:
- 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() { </span></li><li class="alt"><span> (‘#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>
<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
如果你想为每一张图片自定义轮播效果:
- <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
阅读全文
0 0
- 基于JQuery的轮播图插件nivo-slider使用教程
- 基于JQuery的轮播图插件nivo-slider使用教程
- 基于JQuery的轮播图插件nivo-slider使用教程
- 基于JQuery的轮播图插件nivo-slider使用教程
- JQuery插件之(四)--轮播图nivo-slider使用教程
- jquery.nivo.slider轮播插件使用
- jQuery幻灯插件:Nivo Slider
- Nivo Slider 简要使用文档(jQuery幻灯片插件)
- 超棒的免费jQuery幻灯插件:Nivo Slider
- jquery插件nivo-slider实现幻灯效果
- jquery.nivo.slider.pack.js 插件
- 号称最好的JQUERY幻灯片-NIVO SLIDER
- 号称最好的JQUERY幻灯片-NIVO SLIDER
- 分享一个超棒的免费jQuery幻灯插件:Nivo Slider
- 幻灯片插件——Nivo Slider的使用(一)(附示例源代码)
- 基于Bootstrap的jQuery slider插件的使用bootstrap-slider.js
- 滑块: 基于Bootstrap的jQuery slider插件的使用bootstrap-slider.js
- 基于Bootstrap的jQuery slider插件的使用bootstrap-slider.js
- SpringBoot集成分页插件PageHelper
- Hbase的JavaApi和工具类
- Hadoop2.7.4集群的Linux安装步骤
- Codeforces 845A Chess Tourney
- relation window窗口source insight查看函数的上一级调用
- 基于JQuery的轮播图插件nivo-slider使用教程
- 最近在编写一些bat工具时,发现自己对lua的io和正则表达式使用没什么了解,网络上转载解决问题后的文章。
- Node.js的安装
- [LeetCode] 373. Find K Pairs with Smallest Sums
- ospf不同进程下的邻居状态
- 用最小二乘法拟合一元线性方程y=ax+b
- mediawiki常用设置
- js 中的call 和 apply
- 激活函数、损失函数与超参数