IT技术互动交流平台

幻灯片插件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  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规