首页 > WEB开发 > JavaScript开发 > Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
2014
12-09

Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

 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代码

  类库引用:

<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.pack.js"></script>

  调用代码:
$(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加载后调用

  代码示例:

<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代码

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

  如何为每一个幻灯自定义变化效果:

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft"/>

  希望大家喜欢!

编程技巧