号称最好的JQUERY幻灯片-NIVO SLIDER
|
1
2
3
|
<
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代码
|
1
2
3
4
5
|
<
script
type
=
"text/javascript"
>
$(window).load(function() {
$('#slider').nivoSlider();
});
</
script
>
|
3、在body标签中加入以下格式的html代码
|
1
2
3
4
5
6
7
8
|
<
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
> <
imgsrc
=
"images/slide3.jpg"
alt
=
""
title
=
"This is an example of a caption"
> <
imgsrc
=
"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 <
ahref
=
"#"
>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