jQuery幻灯插件：Nivo Slider

时间：2022-04-12 12:07:18

使用步骤

1、引入css文件

default.css 设置展示插件所需的样式，像控制导航键，导航按钮样式，当然你可以自己写个样式

nivo-slider控制图片样式，插件所需的CSS文件

<link rel="stylesheet" href="default/default.css">

<link rel="stylesheet" href="css/nivo-slider.css">

2、引入js文件

<script src="js/jquery-1.9.0.min.js"></script>

<script src="js/jquery.nivo.slider.js"></script>

3、在body标签中加入以下格式的html代码

    <div id="wrapper">

        <div class="slider-wrapper theme-default">

            <div id="slider" class="nivoSlider">

                <img src="data:images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />

                <a href="http://dev7studios.com"><img src="data:images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>

                <img src="data:images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />

                <img src="data:images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />

            </div>

            <div id="htmlcaption" class="nivo-html-caption">

                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.

            </div>

        </div>

    </div>

如果你想给让单击图片时打开一个页面地址，就给图片加个<a>标签链接

如果你想给图片加个标题说明，可以使用title属性，图片下会形成黑色横条

如果你想让标题有样式或者链接，可以将图片的title属性设置为像"#htmlcaption"，即#号后面紧跟指向的ID，如上所示代码，在ID为htmlcaption的DIV中，你可以编辑你想要的HTML代码，Nivoslider插件支持html的图片标题。

4、然后调用Nivoslider插件。

    <script type="text/javascript">

        $(window).load(function() {

            $('#slider').nivoSlider();

        });

    </script>

参数配置

参数名 参数说明 参数类型 默认值
effect 切换样式  字符串 ‘random’
slices 针对slice样式的切换级数，数字越大切换越慢过渡越小 数字 15
boxCols 针对box样式的切换列数，数字越大切换越慢过渡越小 数字 8
boxRows 针对box样式的切换行数，数字越大切换越慢过渡越小 数字 4
animSpeed 切换动画的速度 数字 500
pauseTime 相邻两张幻灯片切换的间隔时间 数字 3000
startSlide 从第几张图片开始切换 数字 0
directionNav 是否显示‘上一张/下一张’导航 布尔值 true
controlNav 是否显示数字导航 布尔值 true
controlNavThumbs 是否用缩略图导航 布尔值 false
pauseOnHover 当鼠标移到幻灯片上的时候是否暂停切换 布尔值 true
manualAdvance 是否强制手动切换 布尔值 false
prevText ’上一张‘的文字  字符串 ‘Prev’
nextText ’下一张‘的文字 字符串 ‘Next’
randomStart 是否从一张随机的图片开始切换 布尔值 false
beforeChange 在幻灯片切换之前的回调函数 函数 function(){}
afterChange 在幻灯片切换之后的回调函数 函数 function(){}
slideshowEnd 在所有幻灯片都切换完毕后的回调函数 函数 function(){}
lastSlide 在最后一张幻灯片显示的回调函数 函数 function(){}
afterLoad 在幻灯片加载完成后的回调函数 函数 function(){}

示例代码如下：

<script type="text/javascript">

$(window).load(function() {

    $('#slider').nivoSlider({

        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'

        slices: 15, // For slice animations

        boxCols: 8, // For box animations

        boxRows: 4, // For box animations

        animSpeed: 500, // Slide transition speed

        pauseTime: 3000, // How long each slide will show

        startSlide: 0, // Set starting Slide (0 index)

        directionNav: true, // Next & Prev navigation

        directionNavHide: true, // Only show on hover

        controlNav: true, // 1,2,3... navigation

        controlNavThumbs: false, // Use thumbnails for Control Nav

        controlNavThumbsFromRel: false, // Use image rel for thumbs

        controlNavThumbsSearch: '.jpg', // Replace this with...

        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src

        keyboardNav: true, // Use left & right arrows

        pauseOnHover: true, // Stop animation while hovering

        manualAdvance: false, // Force manual transitions

        captionOpacity: 0.8, // Universal caption opacity

        prevText: 'Prev', // Prev directionNav text

        nextText: 'Next', // Next directionNav text

        randomStart: false, // Start on a random slide

        beforeChange: function(){}, // Triggers before a slide transition

        afterChange: function(){}, // Triggers after a slide transition

        slideshowEnd: function(){}, // Triggers after all slides have been shown

        lastSlide: function(){}, // Triggers when last slide is shown

        afterLoad: function(){} // Triggers when slider has loaded

    });

});

</script>

通过data-transition="***"来改变当前图片的切换样式，不写默认是随机

如 <img src="data:image/b1.jpg" data-transition="boxRain"/>

切换效果

  • sliceDown

  • sliceDownLeft

  • sliceUp

  • sliceUpLeft

  • sliceUpDown

  • sliceUpDownLeft

  • fold

  • fade

  • random

  • slideInRight

  • slideInLeft

  • boxRandom

  • boxRain

  • boxRainReverse

  • boxRainGrow

  • boxRainGrowReverse

相关文章