我的第一个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>

 

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

 

posted @ 2014-12-03 11:06  K13  阅读(149)  评论(0编辑  收藏  举报