一个图片轮播插件---Nivo Slider

序

安利一个jQuery的图片轮播插件~

在一个项目中需要用到图片轮播，就在谷歌上搜了一下，发现这个插件，配置也简单，使用起来几句代码就搞定了。

图片是用http://itbilu.com/javascript/jquery/N1SqAAoz.html这个博客中的图~

使用方法

引用js文件

这个轮播插件直接引入一个js文件就可以搞定了，当然，它是基于jQuery的，还需要引入jQuery的js文件。

js文件可以在https://github.com/gilbitron/Nivo-Slider这里下载得到，我们需要用到jquery.nivo.slider.pack.js这个文件。

我们可以在http://www.jq22.com/jquery-info122下载到jquery-2.1.4.min.js这个文件。

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

这样就搞定了。

引用css文件

我们需要引入插件的默认css文件，有两个文件：公用样式、主题样式。

<link rel="stylesheet" href="/css/nivo-slider.css" type="text/css" media="screen" /><link rel="stylesheet" href="/css/themes/default/default.css" type="text/css" media="screen" />

可以通过修改css文件中对应的参数来达到自己想要的效果。

html

最重要的还是如何使用这个插件，很简单，几行html代码就可以搞定。

<div class="theme-default">    <div id="slider" class="nivoSlider">        <img src="/images/slider/1.jpg" alt="" title="" />         <img src="/images/slider/2.jpg" alt="" title="" />         <!--……-->    </div></div>

如果图片很多，一条一条的写html会感觉很麻烦。我们可以这样做：

<script type="text/javascript">    $(window).load(function () {        for (i = 1; i < n; i++) {             $("#slider").append("<img src='../images/" + i + ".jpg' title='" + i + "' alt=''/>")        }    });</script>

这样就可以用一条语句载入多张图片。

启动插件

现在图片已经载入完毕，我们启动这个插件。

<script type="text/javascript">    $('#slider').nivoSlider({        animSpeed: 100,          //图片过渡时间           pauseTime: 2000,         //图片显示时间        pauseOnHover: false,        manualAdvance: false,    });</script>

这里就是为这个插件配置参数的地方了，需要怎样的效果在这里设置，其它的地方都可以不用动。

配置文件

$('#slider').nivoSlider({      effect: 'random',               // 过渡效果      slices: 15,                     // 切片效果时的数量      boxCols: 8,                     // 格子效果时的列数      boxRows: 4,                     // 格式效果时的行数      animSpeed: 1000,                // 图片过渡时间      pauseTime: 5000,                // 图片显示时间      startSlide: 0,                  // 从第几张图片开始（第一张为）      directionNav: true,             // 是否显示图片方向切换按钮（上一页/下一页）      controlNav: true,               // 是否显示图片导航控制按钮（,2,3... ）      controlNavThumbs: false,        // 是否使用图片的缩略图做为导航控制按钮      pauseOnHover: true,             // 鼠标县浮时是否停止动画      manualAdvance: false,           // 是否手动切换      prevText: 'Prev',               // 上一页方向切换按钮的显示文本      nextText: 'Next',               // 下一页方向切换按钮的显示文本      randomStart: false,             // 开始图片是否随机      beforeChange: function(){},     // 图片切换前触发函数      afterChange: function(){},      // 图片切换后触发函数      slideshowEnd: function(){},     // 在所有图片显示完毕后触发函数      lastSlide: function(){},        // 在最后一张图片显示完毕后触发函数      afterLoad: function(){}         // 图片加载完毕后触发函数  });