前  言

         

　jQuery是一个功能强大的库，提供了开发JavaScript项目所需的所有核心函数。很多时候我们使用jQuery的原因就是因为其使用插件的功能，然而，有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率。我们知道， jQuery库是为了加快JavaScript的开发速度而设计的，通过简化编写JavaScript的方式，减少代码量。所以，今天就带大家了解一下jQuery自定义插件以及自定义插件案例---banner图滚动。

1.1 自定义插件基础知识

在正式编写属于自己的插件之前，首先要了解自定义插件的相关知识。

1.1.1插件的声明与调用

3.1 Android 事件基础知识

1、全局插件声明：
   　　  $.extend({
   　　　　   func1 : function(){};   //func1 --> 插件名
   　　 　　  func2 : function(){};   //func2 --> 插件名
 　　    });   
  全局插件调用
      $.func1();
      $.func2();
    2、局部插件声明
   　　  $.fn.func = function(){};
     局部插件调用
      $("选择器").func();

实例代码

1.1.2全局插件

$.extend({

            say : function(message){

                alert("你说了："+message);

            },

        });

 $.say("哈哈哈哈");

代码效果：

1.1.3局部插件

声明：

<body>
　　  <div id="div1">
　　  　　　　 这是div1 里面的文字
　　  </div>
　　  <div id="div2">
 　　　　　　  这是div2里面的文字
 　　 </div>
 </body>

$.fn.setFont = function(obj){

            //设置默认值

            var defaults = {            
                "font-size" : "12px",

                "font-weight" : "normal",

                "font-family" : "宋体",

                "color" : "blue"

            };

            //将默认值的属性值，与对应的传入的obj属性值对比。如果，obj里面有该属性，则使用obj里面的属性

            //如果,obj里面没有该属性,则使用默认值

            var newObj = $.extend(defaults,obj);    

            this.css(newObj);

            //将调用当前函数的对象(this)返回，可以保证JQuery的链式调用语法

            return this;

        };

调用：

$("#div1").setFont({

            "font-size" : "20px",

            "font-weight" : "bold",

            "font-family" : "微软雅黑",

            //"color" : "red"

        }).setBgColor().css("text-align","center");//setBgColor没有返回值，故.css()无法执行

        //$("#div1").setFont().css("text-align","center").setBgColor();

        //setFont()和.css()有返回值，setBgColor()没有返回值，故可以全部执行。但如果在setBgColor()后面再加函数，则无法执行。

代码效果：

2.1 实例讲解

经过上面的讲解，相信大家对JQuery自定义插件都有了一定的了解。大家也都发现了，自定义插件的基础知识，比较简单。下面，我们就通过一个习题，再一次的深入的理解下JQuery插件的编写过程。

完整JS代码

/*该插件实现了banner图的滚动效果

 *

 * 1、插件的属性

 *  images ： 接受数组类型，数组的每个值为对象。对象具有属性： src -->图片路径 title--> 图片指上后的提示文字 href-->点击图片跳转页面

 *  scrollTime : 图片停留时间，单位毫秒    默认 5000

 *  bannerHeight ：banner图的高度   默认 500px

 *

 *  iconColor  ：导航默认颜色：white

 *  iconHoverColor ： 鼠标指上导航后的颜色    默认：orange

 *  iconPosition ：导航的位置，可选值：left、right、center。 默认：center

 *

 */

!function($){

    $.fn.scrollBanner  = function(obj){

        $("body").css({

            "padding": "0px",

            "margin": "0px",

        });

        //声明默认值

        var defaults = {

            images : [],

            scrollTime : 2000,

            bannerHeight : "500px",

            iconColor : "white",

            iconHoverColor : "orange",

            iconPosition : "center"

        };

        //将默认值与传入的对象进行比对，如果传入的对象有未赋值属性，则使用默认对象的属性

        obj = $.extend(defaults,obj);

        //组建DOM布局

        this.empty().append("<div class='scrollBanner-banner'></div>");

        $.each(obj.images,function(index,item){

            $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+item.href+"'target='_black'><img src='"+item.src+"'title='"+item.title+"'/></a></div>");

        });

            $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+obj.images[0].href+"' target='_black'><img src='"+obj.images[0].src+"' title='"+obj.images[0].title+"' /></a></div>");

        //设置导航

        this.append("<div class='scrollBanner-icons'></div>");

        $.each(obj.images,function(index,item){

            //data-*属性是H5允许用户自行在HTML标签上保存数据的属性

            //保存在data-*中的数据，可以使用JS读取调用

            $(".scrollBanner-icons").append("<span class='scrollBanner-icon'data-index = '"+index+"'></span>")

        });

        //设置各种CSS

        this.css({

            "width": "100%",

            "height": obj.bannerHeight,

            "overflow": "hidden",

            "position": "relative",

        });

        $(".scrollBanner-banner").css({

            "width": obj.images.length+1+"00%",

            "height": obj.bannerHeight,

            "transition":" all .5s ease",

        });

        $(".scrollBanner-bannerInner").css({

            "width": 100/(obj.images.length+1)+"%",

            "height": obj.bannerHeight,

            "overflow": "hidden",

            "float": "left",

        });

        $(".scrollBanner-bannerInner img").css({

            "width": "1920px",

            "height": obj.bannerHeight,

            "position": "relative",

            "left": "50%",

            "margin-left":"-960px",

        });

        $(".scrollBanner-icons").css({

            "width": 30*obj.images.length+"px",

            "height": "7px",

            "position": "absolute",

            "bottom": "40px",

            "z-index": "1",

        });

        switch (obj.iconPosition){

            case "left":

                $(".scrollBanner-icons").css({

                    "left" :"40px"

                });

                break;

            case "center":

                $(".scrollBanner-icons").css({

                    "left" :"50%",

                    "margin-left": "-"+12.5*obj.images.length+"px",

                });

                break;

            case "right":

                $(".scrollBanner-icons").css({

                    "right" :"40px"

                });

                break;

        }

        $(".scrollBanner-icon").css({

            "width": "15px",

            "height": "7px",

            "background-color": obj.iconColor,

            "display": "inline-block",

            "margin": "0px 5px",

        });

//实现banner图滚动

        var count = 1;

        var icons = $(".scrollBanner-icon");

        $(".scrollBanner-icon:eq(0)").css("background-color", obj.iconHoverColor);

        setInterval(function(){

            $(".scrollBanner-banner").css({

                "margin-left" : "-"+count+"00%",

                "transition":" all .5s ease",

            });

            $(".scrollBanner-icon").css("background-color", obj.iconColor);

            $(".scrollBanner-icon:eq("+count+")").css("background-color", obj.iconHoverColor);

            if (count>=obj.images.length){

                $(".scrollBanner-icon:eq(0)").css("background-color", obj.iconHoverColor);

            }

            if (count> obj.images.length) {

                count = 0;

                $(".scrollBanner-banner").css({

                    "margin-left" : "0px",

                    "transition":" all .0s ease",

                });

            };

            count++;

        },obj.scrollTime);

//导航指上后变色，并切换banner图

        $(".scrollBanner-icon").mouseover(function(){

            $(".scrollBanner-icon").css("background-color", obj.iconColor);

            //由span触发mouseover事件，则this指向这个span

            //但是，这个this时js对象，必须使用$封装成JQuery对象

            $(this).css("background-color", obj.iconHoverColor)

            var index = $(this).attr("data-index");

            //将计数器count修改为index的值，让banner滚动的计数器能够刚好滚到所指图片的下一张

            count = index;

            $(".scrollBanner-banner").css({

                "margin-left" : "-"+index+"00%",

                "transition":"none",

            });

        });

    }

}(jQuery)

调用的HTMl代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>banner图滚动</title>

        <script src="../JS/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>

        <script src="../JS/jquery,scrollBanner.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="banner">

        </div>

    </body>

    <script type="text/javascript">

        $("#banner").scrollBanner({

            images : [

                        {src : "../img/banner1.jpg",title : "banner1",href :"http://www.baidu.com"},

                        {src : "../img/banner2.jpg",title : "banner2",href :"http://www.sina.com.cn"},

                        {src : "../img/banner3.jpg",title : "banner3",href :"http://www.qq.com"},

                        {src : "../img/banner4.jpg",title : "banner4",href :"http://www.jredu100.com"}

                    ],

            scrollTime : 2000,

            bannerHeight : "500px",

            iconColor : "yellow",

            iconHoverColor : "blue",

            iconPosition : "center"

        });

    </script>

</html>

效果图

图片是临时找的，不太清晰，大家将就着看吧。

但是，图片虽不清晰，该有的功能还是有的。到了这里，相信大家，应该也能够独自，编写一个属于自己的插件了吧~~

JQuery实现banner图滚动的更多相关文章

  1. jquery自定义banner图滚动插件---（解决最后一张图片倒回第一张图片的bug）

    banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...

  2. Jquery 实现banner图滚动效果

    html代码: <div id="focus"> <ul> <li><p>禅的修行应要无欲无求1</p><a hr ...

  3. jQuery自定义插件--banner图滚动

    前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...

  4. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  5. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  6. 最简单实用的JQuery实现banner图中的text打字动画效果！！！

    下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...

  7. 如何使用JS实现banner图滚动

    通过JS实现banner图的滚动主要是定时器的应用 先新建好banner图的几张图片,最后一张与第一张用同一个,保证滚动的不间断 改好样式,需注意所有图片要在同行显示,否则不能向左滚动 声明一个函数, ...

  8. 简单易懂的banner图滚动源代码

    banner图左右滚动简单易懂源代码 1 样式展示 css代码: * { padding: 0px; margin: 0px; } .banner { width: 100%; height: 450 ...

  9. JS 实现banner图的滚动和选择效果

    CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...

随机推荐

  1. [2012-08-06]awk多文件合并并按文件名分段

    以下代码满足这样的需求: 多个文件内容合并到一个文件A中(如果没有下面这条,使用cat就能解决) 文件A中每段内容之前保留原先的文件名 awk 'tmp!=FILENAME{tmp=FILENAME; ...

  2. 介绍下Python的两个标准库 os 和 sys

    import sysprint(sys.path) #python 2 中报错 ....,打印的是绝对路径(***\\python\\lib\\site-packages# 第三方库,后退一级为标准库 ...

  3. jquery获取json对象中的key小技巧

    jquery获取json对象中的key小技巧 比如有一个json var json = {"name" : "Tom", "age" : 1 ...

  4. Http和Socket详解

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp59   这不是同一层的协议 socket是一个针对TCP和UDP编程的借 ...

  5. 学习之-ASP.NET MVC Filter

    MVC Filter 是典型的AOP应用,对MVC框架处理客户端请求注入额外的一些逻辑,如日志记录.缓存处理.异常处理和权限验证,性能检测(横切关注点),而这些逻辑通常与主要业务无关,被独立分开作为公 ...

  6. Cetnos搭建vsftp服务器

    1.首先yum安装vsftp server   以3.0.2为例 命令:yum -y install vsftpd 2.配置文件  vsftp.conf 具体配置内容如下: anonymous_ena ...

  7. JS解析JSON 注意事项总结

    0.必须先解析看看,不然看了白看   地址: http://www.bejson.com/ 1.返回的节点内是不是一个json. 如  {id:1,names:"[{name:A},{nam ...

  8. 循环checked表单 元素

    var poject_Array = "";            $('input[name="yearCardPoject"]:checked').each ...

  9. 软工+C(2017第8期) 提问与回复

    // 上一篇:野生程序员 // 下一篇:助教指南 在线上博客教学里引入了第三方助教,助教在每次作业期间尽力完成"消灭零点评"的目标.然而紧接而来的问题是:学生对博客作业点评的回复率 ...

  10. Web编程：JSP环境安装与配置

    Web服务器:Tomcat 数据库服务器:暂时未使用 集成开发环境:eclipse 要运行JSP程序,首先要安装JDK(Java Developer Kit),并且还要配置运行Java程序的环境变量. ...