我的第一个jquery插件——slideForK13图片轮换

接触javascript有一段时间了，平时工作都是尽可能去了解原理，然后自己去实现，从来没有封装过插件。前段时间心血来潮，想 写个无敌版的轮换，于是经过一个月的努力，终于完成，虽然还不够完美，但是就目前我的水平来看，也就只能这样了，以后水平提高了再重构一下（图方便使用了css3，在支持css3的浏览器下看效果比较好，如火狐，谷歌）。下载

可设参数：

"name": ".slide_content",/*图片轮换id或class，垂直滚动ie6高度不准确，需要在css中另设overflow: hidden;*/
"l_t_btn": ".slide_lt_btn",/*左,上按钮id*/
"r_b_btn": ".slide_rb_btn",/*右,下按钮id*/
"index_name": ".index_name",/*索引id或class*/
"page_num": ".page_num",/*当前页数或屏书id或class*/

"img_title": ".img_title", /*插入图片title内容为标题，id或class*/ 新增
"index_way": 0,/*索引操作方式，0单个操作，以下四项起效，1鼠标拖拽,以下四项失效,slide_X只能设置0或1*/
"index_size": true,/*true自动计算索引ul宽高，false不计算*/
"index_num": true,/*数字索引,true为启用，false为关闭*/
"index_hover": 1,/*索引轮换方式，0为不可用，1为hover，2为click*/
"index_now": "index_now",/*当前索引class*/
"mouse_drag": false,/*鼠标内容拖拽，true开启，内容不可点击，auto_way值不能为1，false关闭*/
"li_count": 1,/*显示行数或一行显示个数*/
"page_count": true,/*true每次一屏;false每次一个，拖拽，索引不可用,auto_way值不能为1，slide_X值不能为2*/
"time": 500,/*动画延时*/
"time_auto": 5000,/*自动滚动间隔,单位毫秒，如果为0，则不自动滚动*/
"auto_way" : 0, /*滚动效果，0瞬间回到第一个，1无缝回到第一个，2来回循环*/
"slide_X": 0/*轮换方式，0水平，1垂直,2渐隐*/

功能：

1. 多种滚动方式，支持左右滚，上下滚，渐隐效果

2. 多种滚动效果，支持瞬间回到第一个，无缝切换，来回循环切换

3. 索引，点击按钮，当前数量，根据需要定制，html中添加即可显示，不需要去掉即可，无需另设

4. 所有表现尽可能分离出来，效果由css设置，可自由定制显示效果

5. 所用id或class等都可以随时变换

6. 可自动计算滚动内容宽高，可设置一屏滚动数量

7. 支持拖拽

8. 等等，有兴趣自己研究下会发现更多，以上参数便是所有功能

9. 如有更好的实现方法或建议，请通知我，呵呵，感觉代码有点复杂和乱，如果能精简下，体积应该能减少1/3——1/2。

下载地址

示例：

页面引入：

<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="script/solideForK13.min.js"></script>

调用方法：

如果使用默认设置，如下：

$("#slide_5").slideForK13();

如果自定义参数，如下：

$("#slide_5").slideForK13({
auto_way: 1,
slide_X: 0,
index_hover: 0,
index_num: false
});

html:

<div id="slide_5">
<div class="slide_content">
<ul>
<li><img src="images/001.jpg" alt=""></li>
<li><img src="images/002.jpg" alt=""></li>
<li><img src="images/003.jpg" alt=""></li>
</ul>
</div>
<ul class="index_name"></ul>
</div>

自己写了几个示例放在 打包文件中，效果如下图：