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

最新推荐文章于 2025-01-19 10:30:05 发布

原创最新推荐文章于 2025-01-19 10:30:05 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

本文主要介绍了Nivo Slider插件的使用，特别是深入探讨了如何设置和调整幻灯片的各种效果，包括默认值的详细解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四、幻灯片效果设置

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