Nivo Slider jQuery 插件教程教学

原创
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


	<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


	<div id="slider" class="nivoSlider">
		<img src="http://iph.href.lu/370x345?text=轮播测试1" alt="" />
		<a href="http://qq.com"><img src="http://iph.href.lu/370x345?text=轮播测试2" alt="" title="#htmlcaption" /></a>
		<img src="http://iph.href.lu/370x345?text=轮播测试3" alt="" title="This is an example of a caption" />
		<img src="http://iph.href.lu/370x345?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>

加上 JS 调用


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

最后记得给幻灯片的 div 容器设定 widht 和 height。

PS：这款插件还支持丰富的自定义功能，隐藏广告词、隐藏导航圆球、自定义切换速度等等，如果硬要说缺点，那分页只能显示小圆点，不能用 1 2 3 4 算一个，哈哈哈。

欢迎转载，但请勿用于任何商业用途，谢谢你！请标注以下信息『 原文出处：Nivo Slider jQuery 插件教程教学 - 张林海博客 http://zhanglinhai.com/archives/115 』