一个非常不错的jQuery图片轮播插件Nivo Slider

 2015年05月01日    1144     声明


前段时间因工作需要,要在页面做一个轮播大图。经过一番对比,觉得最合适的还是Nivo Slider插件最合适。这个插件有16种切换效果、配置使用比较简单灵活、体积小比较轻量化,很符合我的需求。因此整理记录一下,以方便以后使用。


jQuery图片轮播插件Nivo Slider

配置完成后是上面图片的样子,还是很不错,切换自然且变化丰富。

Nivo Sider使用方法

1.引用css

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

共需要引用两个css文件,一个Nivo Sider的公用样式,一个主题的样式文件。Nivo Slider提供了三种主题,我使用了默认主题。并对默认样式的进行了调整,主要是改动了图片下面圆点的位置。


2.引用JavaScript文件

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

Nivo Slider是基于jQuery开发的,所以需要引用jQuery库文件及Nivo Slider的js文件


3.添加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="" /> 
        <img src="/images/slider/3.jpg" alt="" title="" /> 
        <img src="/images/slider/4.jpg" alt="" title="" />
        <img src="/images/slider/5.jpg" alt="" title="" />
    </div>
</div>

下载的源代码中,一共有3个主题包。修改主题只需引用对应主是的css,并修改HTML代码中div的class就行了。


4.添加js启动脚本

$(window).load(function() {
     $('#slider').nivoSlider({pauseTime: 3000});
  });		

OK,至此已经完成了Nivo Slider的简单配置。


5.更多配置

Nivo Slider的启动方法直接更多的参数配置,具体参数如下:

$('#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(){}         // 图片加载完毕后触发函数  
}); 

配置参数中过渡效果effect,支持的效果如下:

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse