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

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

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