号称最好的JQUERY幻灯片-NIVO SLIDER

插件信息

官网： http://nivo.dev7studios.com/

Demo：http://nivo.dev7studios.com/demos/

预览图

使用步骤

1、引入以下的js和css文件

< link rel = "stylesheet" href = "nivo-slider.css" type = "text/css" media = "screen" >
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type = "text/javascript" ></ script >
< script src = "jquery.nivo.slider.pack.js" type = "text/javascript" ></ script >

2、在head标签中加入以下js代码

< script type = "text/javascript" >
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
</ script >

3、在body标签中加入以下格式的html代码

< div class = "slider-wrapper" >
    < div id = "slider" class = "nivoSlider" >
        < img src = "images/slide1.jpg" alt = "" > < a href = "http://dev7studios.com" >< img src = "images/slide2.jpg" alt = "" title = "#htmlcaption" ></ a > < img src = "images/slide3.jpg" alt = "" title = "This is an example of a caption" > < img src = "images/slide4.jpg" alt = "" >
    </ div >
</ 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 >

参数配置

参数名 参数说明 可选值 默认值
参数名 参数说明 参数取值 默认值
effect 切换样式 字符串 ‘random’
slices 针对slice样式的切换级数，数字越大切换越慢过渡越小 数字 15
boxCols 针对box样式的切换列数，数字越大切换越慢过渡越小 数字 8
boxRows 针对box样式的切换行数，数字越大切换越慢过渡越小 数字 4
animSpeed 切换动画的速度 数字 500
pauseTime 相邻两张幻灯片切换的间隔时间 数字 3000
startSlide 从第几张图片开始切换 数字 0
directionNav 是否显示‘上一张/下一张’导航 布尔值 true
controlNav 是否显示数字导航 布尔值 true
controlNavThumbs 是否用缩略图导航 布尔值 false, // Use thumbnails for Control Nav
pauseOnHover 当鼠标移到幻灯片上的时候是否暂停切换 布尔值 true
manualAdvance 是否强制手动切换 布尔值 false
prevText ’上一张‘的文字 字符串 ‘Prev’
nextText ’下一张‘的文字 字符串 ‘Next’
randomStart 是否从一张随机的图片开始切换 布尔值 false
beforeChange 在幻灯片切换之前的回调函数 函数 function(){}
afterChange 在幻灯片切换之后的回调函数 函数 function(){}
slideshowEnd 在所有幻灯片都切换完毕后的回调函数 函数 function(){}
lastSlide 在最后一张幻灯片显示的回调函数 函数 function(){}

afterLoad 在幻灯片加载完成后的回调函数 函数 function(){}

切换效果

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

boxRainGrowReverse

下载地址

官方下载： http://nivo.dev7studios.com/pricing
网盘下载： http://pan.baidu.com/share/link?shareid=224006&uk=2166814920