我的第一个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>
自己写了几个示例放在 打包文件中,效果如下图: