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