当前位置: 首页 > 工具软件 > nivo > 使用案例 >

幻灯片插件——Nivo Slider的使用(二)

邓声
2023-12-01


四、幻灯片效果设置

在调用函数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>

 类似资料: