幻灯片插件——Nivo Slider的使用（二）

【示例源代码下载】：http://download.csdn.net/detail/yousuosi/6501701

Nivo Slider号称世界最棒的轻量级JQuery图片幻灯插件，按它的官网所说，“以漂亮和易于使用而闻名于世”！

憾人的效果可欣赏一下由Solagirl收集整理的实例展示：http://www.solagirl.net/mydemo/my-custom-nivo-slider/



四、幻灯片效果设置

在调用函数nivoSlider（）时，可进行很多设置，下面代码是可以进行的所有可能的设置选项和他们的默认值：

<script type="text/javascript">
    $(window).load(function() {
        $('#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(){}         // 图片加载完毕后触发函数
        });
    });
</script>

说明：

1、如果不进行设置，所有选项都是默认值；

2、可只针对其中一项或者几项进行设置，例如，不显示图片方向切换按钮（上一页/下一页）和图片导航控制按钮（,2,3...）可设置如下：

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
            directionNav: false,             // 是否显示图片方向切换按钮（上一页/下一页）
            controlNav: false,               // 是否显示图片导航控制按钮（,2,3... ）
        });
    });
</script>

3、幻灯片效果选项effect可以设置为以下几种效果：

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

参考网址：

[1]Nivo Slider 简要使用文档.http://www.2cto.com/kf/201202/119195.html.

[2]基于JQuery Nivo Slider幻灯插件.http://www.111cn.net/wy/jquery/40801.htm.

[3]Nivo Slider官网教程：http://docs.dev7studios.com/jquery-plugins/nivo-slider