我的第一个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" ></li>
                <li><img src="images/002.jpg" ></li>
                <li><img src="images/003.jpg" ></li>
            </ul>
        </div>
        <ul class="index_name"></ul>
    </div>

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

时间: 2024-10-16 15:58:00

我的第一个jquery插件——slideForK13图片轮换的相关文章

分享一个jquery插件,弥补一下hover事件的小小不足

hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件 应该设置一个时差来控制hover事件的触发 比如jd左边的菜单 你用鼠标瞬间划过他子菜单会弹出然后立即消失, 用户体验非常的不好. 易迅的菜单就没有这个问题 delayHover来解决这个问题 啥也不说了先看调用---------- 调用方式: var duration = 500;// 延迟500毫秒 $('#div1').delayHover(function

你真的需要一个jQuery插件吗

jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错误的时间比实际从头 开始编写组件的时间还长. 幸运的是,人们通常具有各种不同的插件可供选择.但是,即使你只用一个,也要弄清楚它是否值得使用的.永远不要在你的代码库中引入错误的代码. 你需要一个插件吗? 首先是要弄清楚究竟你是否需要一个插件.如果不需要,既可以节省文件大小,又可以节省自己的时间. 1.

ASP.NET中使用jQuery插件实现图片幻灯效果

参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title></title><script type="text/javascript" src="scripts/jquery/jquery-1.10.2.min.js"></script><script type="text/java

如何开发一个Jquery插件?

最近有离职的想法,可这不是重点,重点是很多面试官都会问的一个问题就是:怎么开发一个jquery插件. 其实,如果是在真实的工作中遇到这种情况,我会直接找一个简单的jquery插件,例如jquery.cookie.js或者jquery.textchange.js插件,jquery的插件那么多,你随便找来一个都是可以用的,我们需要做的就是把jquery的架子留下来,把具体的功能实现换成自己的,然后就可以到处去使用了. 但是,面试中我们是万万不能这么回答的,所以,一方面是为了让自己再熟悉一下jquer

做了一个jquery插件,使表格的标题列可左右拉伸

示例下载 插件名称命名为:jquery.tableresize.js,代码如下: /* Writen by mlcactus, 2014-11-24 这是我封装的一个jquery插件,能够使table的各列可以左右拉伸,从而使宽度变小或变大 用法: 单个table:$("#table_id").tableresize(); 页面所有table:$("table").tableresize(); */ (function ($) { $.fn.tableresize

使用jquery插件实现图片延迟加载技术(懒加载)

有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的. 这里推荐使用jquery图片延迟加载插件jquery.lazyload实现图片延迟加载提高网站打开速度 下载地址:http://www.appelsiini.net/download/jquery.lazyload.js 修正版:jquery.lazyloa

jQuery插件imgAreaSelect图片裁剪使用详解

1.介绍 ImgAreaSelect是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,非常的fashion.另外,可以在这个选择图像区域的基础上应用网站的其他一些技术,比如图片拖曳.图片编辑等. 2.基本用法 这个插件基于jQuery上通过imgAreaSelect()方法来调用,它操作的对象是HTML中<img>元素内的图像. 代码如下: <script type="text/javascript"> $(document).ready(funct

如何去定义一个jquery插件

扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方法 $.extend(object) 例子: 1 2 3 4 5 6 7 /* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ f

开发一个jQuery插件——多级联动菜单

引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中jQuery传入的是jquery对