jQuery轮播插件

jQuery
yutao

轮播图这种东西是网站总要用到，产品有需求，UI木有资源，自己做一下吧…
效果如下：


jQuery轮播图的源码

简单的功能：

1.左右按钮点击切换
2.点击略缩图切换

简单的接口

1
2
3
4
5

$("#carousel").Ycarousel({
	visibItemNum: 6,//略缩图个数 int;默认值3
	loop: true,//是否循环切换(true/false);默认值true
	horizontal: true //水平显示(true/false);默认值true
});

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

html格式：
<div id="carousel">
	<div class="img-show">
		<!--class=display-Container 必须-->
		<img class="display-Container" src="images/02.jpg" title="这是大图"/>
	</div>
	<div class="nav-wrap clearfix">
		<!--class=js_prevbar 必须-->
		<a href="javascript:;" class="left bradiusl bar-wrap js_prevbar" title="点击向左翻"><</a>
		<!--class=js_visiblearea 必须-->
		<div class="left js_visiblearea visible-wrap">
			<!--class=js_inarea 必须-->
			<ul class="js_inarea sub-wrap clearfix">
				<!--rel='big-img-url' 必须-->
				<li rel="images/01.jpg">
					<a href="javascript:;"><img src="images/001.jpg" alt="这里风景独好"/></a>
				</li>
			<ul>
		</div>
		<!--class=js_nextbar 必须-->
		<a href="javascript:;" class="left bradiusl bar-wrap js_nextbar" title="点击向左翻"><</a>
	</div>
</div>
js调用：
$("#carousel").Ycarousel();

写完插件的感受：
插件的难点在于代码功能和结构的设计，好的设计能很好的适应业务的变动。
插件的可扩展性，易读性很重要。