Nivo Slider jQuery 插件教程教学
原创 张 林海
Nivo Slider 号称是世界上最好的幻灯片插件，不管你是在 WordPress 中作为插件还是集成到自己写的 PHP、JSP、ASP 项目中去都是非常好的选择。本文将帮你快速集成 Nivo Slider。
当然，小缺点是只能显示导航小球，无法用 “1、2、3、4”数字导航。
准备工作
先从 https://github.com/Codeinwp/Nivo-Slider-jQuery 下载jQuery Plugin
解压后放在网站文件夹中，本文假设放置在 /script/nivo-slider/ 中。
安装和使用
假定我们需要安装在 index.html，首先在 <head></head>中间引入以下 CSS
[html]
<link rel="stylesheet" href="https://cdn.staticfile.org/jquery-nivoslider/3.2/nivo-slider.min.css" type="text/css" />
<script src="https://cdn.staticfile.org/jquery-nivoslider/3.2/jquery.nivo.slider.pack.min.js" type="text/javascript"></script>
[/html]
然后在需要展示幻灯片的地方插入以下 html
[html]
<div id="slider" class="nivoSlider">
<img src="http://iph.href.lu/370×345?text=轮播测试1" alt="" />
<a href="http://qq.com"><img src="http://iph.href.lu/370×345?text=轮播测试2" alt="" title="#htmlcaption" /></a>
<img src="http://iph.href.lu/370×345?text=轮播测试3" alt="" title="This is an example of a caption" />
<img src="http://iph.href.lu/370×345?text=轮播测试4" alt="" />
</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>
[/html]
加上 JS 调用
[html]
<script type="text/javascript">
$(window).on(‘load’, function() {
$(‘#slider’).nivoSlider();
});
</script>
[/html]
最后记得给幻灯片的 div 容器设定 widht 和 height。
PS：这款插件还支持丰富的自定义功能，隐藏广告词、隐藏导航圆球、自定义切换速度等等，如果硬要说缺点，那分页只能显示小圆点，不能用 1 2 3 4 算一个，哈哈哈。
欢迎转载，但请勿用于任何商业用途，谢谢你！请标注以下信息『 原文出处：Nivo Slider jQuery 插件教程教学 - 张林海博客 http://zhanglinhai.com/archives/115 』