幻灯片插件——Nivo Slider的使用（一）（附示例源代码）

最新推荐文章于 2018-08-24 14:52:56 发布

西园软件

最新推荐文章于 2018-08-24 14:52:56 发布

阅读量7.9k

点赞数 5

分类专栏：【HTML+CSS实例】

本文链接：https://blog.csdn.net/yousuosi/article/details/14129861

版权

【HTML+CSS实例】专栏收录该内容

6 篇文章 0 订阅

订阅专栏

【示例源代码下载】：http://download.csdn.net/detail/yousuosi/6501701

Nivo Slider号称世界最棒的轻量级JQuery图片幻灯插件，按它的官网所说，“以漂亮和易于使用而闻名于世”！

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

我们先从最简单的开始。

一、效果图

二、设置要显示的图片和图片标题

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>

说明：

这个HTML结构和内容只是起设置作用，一般在呈现的时候都不显示；
简单的图片标题可以象第二张图片那样，在属性中设置；复杂的标题可以象第四张图片那样，设置标题的id；当然也可以象第一、三张图片那样不设置标题。
给图片加链接，应该可以不用说了。

三、配置NivoSlider插件

配置NivoSlider插件非常简单，你只需要在网页的<head>标签中添加如下代码：

<link href="JQuery/nivo-slider.css" rel="stylesheet" type="text/css" />
<script src="JQuery/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="JQuery/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
</script>

说明：

Nivo Slider官网地址：http://dev7studios.com/plugins/nivo-slider，可下载最新版本的Nivo Slider；
JQuery需要v1.7+以上版本，本实例使用的是jQuery v1.10.1。

参考网址：

[1]Nivo Slider 简要使用文档.http://www.2cto.com/kf/201202/119195.html.

[2]基于JQuery Nivo Slider幻灯插件.http://www.111cn.net/wy/jquery/40801.htm.

[3]Nivo Slider官网教程：http://docs.dev7studios.com/jquery-plugins/nivo-slider

西园软件

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
幻灯片插件——Nivo Slider的使用（一）（附示例源代码）

Nivo Slider号称世界最棒的轻量级JQuery图片幻灯插件，按它的官网所说，“以漂亮和易于使用而闻名于世”！憾人的效果可欣赏一下由Solagirl收集整理的实例展示：http://www.solagirl.net/mydemo/my-custom-nivo-slider/Nivo Slider官网地址：http://dev7studios.com/plugins/nivo-slider/
复制链接

扫一扫

专栏目录