Nivo Slider号称世界最棒的轻量级JQuery图片幻灯插件,按它的官网所说,“以漂亮和易于使用而闻名于世”!有独立的 jQuery 插件和 WordPress 插件两个版本。jQuery 独立版本的插件主要有如下特色:
- ✓ 16个独特的过渡效果
- ✓ 简洁和有效的标记
- ✓ 加载参数设置
- ✓ 内置方向和导航控制
- ✓ 压缩版本大小只有12KB
- ✓ 支持链接图像
- ✓ 支持 HTML 标题
- ✓ 3套精美光滑的主题
- ✓ 在MIT许可下免费使用
- ✓ 支持响应式设计
官网地址:http://dev7studios.com/plugins/nivo-slider
插件下载:http://dev7studios.com/downloads/63
效果演示:http://demo.dev7studios.com/nivo-slider
示例代码:
Javascript代码
类库引用:
1 2 3 4 | < script type = "text/javascript" src = "scripts/jquery-1.6.4.min.js" ></ script > < script type = "text/javascript" src = "../jquery.nivo.slider.pack.js" ></ script > 调用代码: |
1 2 3 | $(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加载后调用
代码示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | < 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代码
1 2 3 4 5 6 7 8 9 10 11 12 | < div class = "slider-wrapper theme-default" > < div class = "ribbon" ></ div > < div id = "slider" class = "nivoSlider" > < img src = "images/toystory.jpg" alt = "" /> < a href = "http://dev7studios.com" >< 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 > |
如何为每一个幻灯自定义变化效果:
1 | < img src = "images/slide1.jpg" alt = "" data-transition = "slideInLeft" /> |
希望大家喜欢!
扫码二维码 获取免费视频学习资料
- 本文固定链接: http://phpxs.com/post/2218/
- 转载请注明:转载必须在正文中标注并保留原文链接
- 扫码: 扫上方二维码获取免费视频资料
查 看2022高级编程视频教程免费获取