jQuery-banner使用手册

当前版本：v1.2.0 beta

jQuery-banner是什么？###

jQuery-banner是一款基于jQuery库开发的轻量级轮播插件，方便开发者快速完成针对页面轮播效果的开发，并获得不同的轮播效果。例如，水平滑动或垂直滑动，以及淡出淡入或切换等！（适用于常规banner、照片大图预览幻灯片切换效果、滚屏效果等）此插件的当前版本为 V1.1。本插件由lzmoop（磨盘兄弟）提供的免费开源插件。

具体参数列表###

参数名称	参数取值	参数说明
动画效果:	'[left]' / '[right]' / '[up]' / '[down]' / '[fade]' / '[cut]'	本参数为空时：默认值为 left 本参数可省略
间隔时间：	'[slow]' / '[medium]' / '[fast]' / [number]	本参数为空时：默认值为 medium 即 3000 本参数可省略
动画速度:	'[slow]' / '[medium]' / '[fast]' / [number]	当参数不是自定义数字时应省略
是否自动：	[true] / [false]	本参数为空时：默认自动播放,只能用对象{'auto':true/false}传参
是否循环:	[true] / [false]	本参数为空时：默认循环播放,只能用对象{'cycle':true/false}传参
调用函数：$(selector/object).banner([animation],[interval],[duration]);或以对象的方法传参，示例参考下方代码片段。[] 表示参数可省略

引入库文件

-- 此插件基于jQuery开发

	
<script src="js/jquery-11.1.1.min.js"></script>
<script src="js/jquery-banner.1.2.0.min.js"></script>
<link href="css/jquery-banner.css" rel="stylesheet" type="text/css">
	

HTML代码片段

-- 页面上必须的html代码，保证外层框架结构相同，标记不限，内层结构不限

	
	<div id='selector'>
		<ul>
			<li><a href="#"><img src="images/01.png"></a></li>
			<li><a href="#"><img src="images/02.png"></a></li>
			<li><a href="#"><img src="images/03.png"></a></li>
		</ul>
	</div>
	

调用插件

-- 参数可为空，全部参数请参考列表；可多次调用

	
	<script type="javascript">
	<!--
		$('#banner').banner('fade',3000,600) //效果 间隔时间 运行速度 

		/* 或使用对象传参 */

		$('#banner').banner({
			effect : 'down' ,
			intervalue : 3000 ,
			speed : 600 ,
			auto : true ,//默认自动
			cycle : true//默认循环
		})
	-->
	</script>
	

官方提供的选择器

-- 自定义样式时请带上外层父级id，避免同一页面多个组件样式冲突

	
	.jquery-bannerImg  /* banner外层框架 */
	.jquery-bannerImg-images  /* banner的运动层 */
	.jquery-bannerBtn  /* banner左右控件的盒子 */
	.jquery-bannerBtn-left  /* banner的向左控件 */
	.jquery-bannerBtn-right  /* banner的向右控件 */
	.jquery-bannerPoint  /* banner的焦点按钮盒子 */
	.jquery-bannerPoint-point  /* banner的焦点按钮 */
	.jquery-bannerPoint-hover  /* 控制banner的焦点按钮选中时的样式 */
	

• © 本手册由 磨盘兄弟 @lzmoop 官方提供