jQuery.nivo.slider.js 幻灯片图片切换

号称最好的JQUERY幻灯片，虽然夸夸其谈，但也算简单易用

​使用步骤​

​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> <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

​