编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

幻灯片插件Nivo Slider的使用

发布日期:2013-11-04 20:14:06
  • 收藏本文    我要投稿
  • Nivo Slider号称世界最棒的轻量级JQuery图片幻灯插件,按它的官网所说,“以漂亮和易于使用而闻名于世”!

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

    Nivo Slider官网地址: http://dev7studios.com/plugins/nivo-slider,可下载最新版本的Nivo Slider。

     \
     

    一、幻灯片配置文件
    配置Nivo Slider插件非常简单,你只需要在网页的<head>标签中添加如下代码:

     

        <link href="JQuery/nivo-slider.css" rel="stylesheet" type="text/css" />
        <script src="JQuery/jquery.min.js" type="text/javascript"></script>
        <script src="JQuery/jquery.nivo.slider.pack.js" type="text/javascript"></script>

    注意JQuery需要v1.7+以上版本

    二、幻灯片的HTML结构和内容

    幻灯片基本上由四部分组成:图片组、标题、方向切换按钮(上一页/下一页)和导航控制按钮(,2,3... ),HTML结构与内容示例如下:


    <div class="slider-wrapper">
        <div id="slider" class="nivoSlider">
            <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
            <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
            <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" />
            <img src="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>

    1、图片组

    图片组标签<img>是必须的HTML结构。<img>的外面可以加链接标签<a>,也可以不加;可以使用属性title指定标题文本;可以使用属性data-transition指定本张图片的切换效果。

    2、标题

    标题可以以文本的形式直接加在图片的标签<img>属性title上,例如:title="This is an example of a caption";

    也可以做成<div id="htmlcaption"class="nivo-html-caption">,然后加在图片的标签<img>属性title上,例如:title="#htmlcaption"。

    3、导航控制按钮(,2,3... )

    导航控制按钮是NivoSlider根据图片的个数自动生成的,默认生成的是数字,显示在图片的左上角,HTML结构与内容示例如下:


    <div class="nivo-controlNav">
        <a class="nivo-control" rel="0">1</a>
        <a class="nivo-control active" rel="1">2</a>
        <a class="nivo-control" rel="2">3</a>
        <a class="nivo-control" rel="3">4</a>
    </div>

    在样式表中,可以修改按钮图片,并设置位置及其它样式。

    4、方向切换按钮(上一页/下一页)

    方向切换按钮也是NivoSlider自动生成的,HTML结构与内容示例如下:


    <div style="display: none;" class="nivo-directionNav">
        <a class="nivo-prevNav">Prev</a>
        <a class="nivo-nextNav">Next</a>
    </div>

    在样式表中,可以修改按钮图片,并设置位置及其它样式。

    三、最简单的调用


    <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
    </script>

    注意:the Nivo Slider 使用的是$(window).load()函数而不是很多其它JQuery插件使用的$(document).ready()。

    四、使用参数的调用

     

    <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、$(window).load(function()的这些参数,如果全部使用默认设置,可以不使用参数,象最简单的调用一样;如果只改变一个或几个参数,也可以只使用这一个或几个参数。

    2、参数effect,也就是Nivo Slider幻灯片的过渡效果,可以是以下种之一,也可以组合设置,例如:'fold,fade,sliceDown'

    sliceDown

    sliceDownLeft

    sliceUp

    sliceUpLeft

    sliceUpDown

    sliceUpDownLeft

    fold

    fade

    random

    slideInRight

    slideInLeft

    boxRandom

    boxRain

    boxRainReverse

    boxRainGrow

    boxRainGrowReverse

    五、使用缩略图

    如果使用幻灯片的缩略图取代默认的导航控制按钮(,2,3... ),首先要设置调用函数的参数controlNavThumbs: true,然后,在图片组的<img>标签中设置属性data-thumb指定缩略图的位置和名称,示例代码如下:


    <div id="Div1">
        <img src="images/up.jpg" alt="" data-thumb="images/up_thumb.jpg" />
        <img src="images/monstersinc.jpg" alt="" data-thumb="images/monstersinc_thumb.jpg" />
        <img src="images/nemo.jpg" alt="" data-thumb="images/nemo_thumb.jpg" />
        <img src="images/walle.jpg" alt="" data-thumb="images/walle_thumb.jpg" />
    </div>

    六、使用主题

    Nivo Slider官方网站提供的示例代码,使用了主题,将几种不同的标题、方向切换按钮、导航控制按钮样式效果集成在一起,你也可以在自己的网站上使用主题方便显示不同的显示效果。

    使用主题,你需要做以下几步:

    1、在<head>标签中引用你的主题(不同的主题,其实就是不同的样式表),示例如下:

     

    <link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />

    2、在Slider的外包标签<divclass="slider-wrapper">中添加主题样式,示例如下:

     

    <div class="slider-wrapper theme-default"> 
        <div id="Div1" class="nivoSlider"> 
            ...
        </div> 
    </div> 

    http://blog.csdn.net/yousuosi

延伸阅读:

Tag标签:Nivo  Slider  
  • 专题推荐