前言

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

一、自定义插件

自定义插件一般有两种类型：全局插件和局部插件；接下来，先了解一下这两种插件；

1、全局插件声明——为扩展jQuery类本身.为类添加新的方法。
    $.extend({
     func:function(){}  // func -->插件名
    })；
   
    全局插件调用：
    $.func();

定义一个全局变量，其实就是在$.extend中定义对象里面的方法进行编译自己想要得到的功能插件，并留出想要的变量接口；

举个小例子：

JS:

<script type="text/javascript">

　　$.extend({

   　　 sayHello : function(){

       　　 alert("hello!!");

   　　 },

   　　 say : function(message){

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

    　　}

　　});

  　　  $.sayHello();

   　　 $.say("hhahaha");

</script>

2、局部插件声明
    $.fn.func = function(){}
   
    局部插件调用
    $("选择器").func();

举个小例子：

JS：

<script type="text/javascript">

$.fn.setBgColor = function(bgColor){

                bgColor = bgColor?bgColor:"#ccc";  //设置默认值

                this.css("background-color",bgColor);

            }

            $("#div1").setBgColor("red");

            $.fn.setFont = function(obj){

                var defaults = {

                    "font-size" : "35px",

                    "font-weight" : "normal",

                    "font-family" : "宋体",

                    "color" : "#ccc"

                }

                //将默认值与传入的obj比对。并返回一个新对象。

                //如果obj里面有的属性，则使用obj属性。

                //如果obj没有声明的属性则使用默认值里面的属性

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

                this.css(newObj);

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

                return this;

            };3

            $("#div1").setFont({

                "font-size" : "20px",

                "font-weight" : "bold",

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

                "color" : "blue"

            });

        </script>

结果：

提醒：在上述的小例子中，在$.fn声明的插件函数中，可以使用this代指调用这个插件的的对象节点。
    而且，尤其要记住，this是一个JQuery对象，需要操作jQuery，千万不要用原生JS的DOM；

在上述的例子中，通过设置默认值来设置接口。通过调用插件，将所需设置的css样式设置在函数的odj中，并返回一个新对象从而实现功能；

二、自定义插件-banner图滚动

该插件实现banner滚动
 
 一、插件的属性：
 images:接受数组类型，数组的每个值应为对象。对象具有属性:src->图片的路径
 title->图片指上后的文字  href->图片指上后的跳转页面
 scrollTime:滚动时间，单位毫秒  5000
 bannerHeight：Banner图的高度
 
 iconColor：图片导航的颜色。默认white
 iconHoverColor：图片导航指上后的颜色。默认 orange
 iconPosition：图片导航的位置。可选left/right/center. 默认为center

1、小图标指上以后变色并且切换banner图

 通过：由span触发mouseover事件，则this指向这个span。
 但是，这this是JS对象，必须使用$封装成JQuery对象

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

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

             // 。

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

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

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

              count = index;

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

                 "transition": "none",

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

             });

         });

效果：

3.2.1插件总代码

自定义banner图效果

HTML代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>自定义插件实现banner图滚动</title>

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

        <script src="JS/jquery-acrollBanner.js"type="text/javascript"></script>

    </head>

    <body>

        <div id="banner"></div>

<script type="text/javascript">

    $("#banner").scrollBanner({

        images :[

        {src:"插件/img/banner01.png",title:"banner1",href:"http://www.baidu.com"},

        {src:"插件/img/banner02.png",title:"banner2",href:"http://www.sina.com"},

        {src:"插件/img/banner03.png",title:"banner3",href:"http://www.baidu.com"},

        {src:"插件/img/banner04.png",title:"banner4",href:"http://www.baidu.com"},

                ]

            });

        </script>

    </body>

</html>

插件源码

 !function($){

     $.fn.scrollBanner = function(obj){

         // 声明各个属性的默认值,也就是设置插件可接收的接口

         var defaults = {

             images : [],

             scrollTime : 2000,

             bannerHeight : "500px",

             iconColor : "white",

             iconHoverColor : "orange",

             iconPosition : "center"

         }

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

         obj = $.extend(defaults,obj);

         console.log(obj);

         // 组件DOM布局

         $("body").css({"padding":"0px","margin" : "0px"});

         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({

             "position":"absolute",

             "z-index":"100",

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

             "bottom":"40px",

             "height":"7px"

         })

         switch (obj.iconPosition){

             case "left":

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

                     "left":"40px",

                 });

                 break;

             case "right":

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

                     "right":"40px",

                 });

                 break;

             case "center":

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

                     "left":"50%",

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

                 });

                 break;

             default:

                 break;

         }

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

                 "width": "15px",

                  "height": "5px",

                  "background-color": obj.iconColor,

                  "display": "inline-block",

                  "margin": "0px 5px"

         })

         //小图标指上以后变色并且切换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({

                 "transition": "none",

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

             });

         });

         //实现banner滚动

         var count = 0 ;

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

         setInterval(function(){

             count++;

             $(".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":"none"

                 })

             }

         },obj.scrollTime);

     }

 }(jQuery);

jQuery自定义插件--banner图滚动的更多相关文章

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

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

  2. JQuery实现banner图滚动

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

  3. 你的专属定制——JQuery自定义插件

        前  言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗 ...

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

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

  5. fullpage的使用以及less, Sass的属性和JQuery自定义插件的声明和使用

    使用fullpage的步骤   1 导入JQuery.js fullpage,js fullpage.css 2 组建网页布局,最外层id="fullpage" 单页class=& ...

  6. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  7. jquery自定义插件——以 选项卡插件为例

    一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...

  8. jQuery自定义插件

    jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件,   ( ...

  9. 代码：jquery自定义插件 demo

    jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cd ...

随机推荐

  1. 人生苦短我用Python 第三周 函数周

    函数的定义: 1,def 函数名(参数1,参数2......): "注释:函数的作用和参数,增加可读性", 2,函数体 3,返回值 最简单的函数: def func(): prin ...

  2. 请求Url返回数据较大，使结果分页获取

    首先创建了一个单元测试,如下项目视图: 分页结果映射类PageResult的编写: using System; using System.Collections.Generic; using Syst ...

  3. 【渗透课程】特别篇-主流网站程序Oday大全以及拿shell思路

    版权和内容说明: 这篇文章不是本站编写,是从网络上摘抄的,但是经过了本站的改写优化,并将内容,格式规范化. 本篇说明:这篇文章结合了前辈们前几年一路挖掘出来的主流程序漏洞以及思路, 小编写在前面是想让 ...

  4. UIGraphicsBeginImageContext - 位图上下文

    UIGraphicsBeginImageContext 首先,先来认识一个UIGraphicsBeginImageContext,它会创建一个基于位图的上下文(context)(默认创建一个透明的位图 ...

  5. SSE图像算法优化系列十一：使用FFT变换实现图像卷积。

    本文重点主要不在于FFT的SSE优化,而在于使用FFT实现快速卷积的相关技巧和过程. 关于FFT变换,有很多参考的代码,特别是对于长度为2的整数次幂的序列,实现起来也是非常简易的,而对于非2次幂的序列 ...

  6. [2013-07-22]varnish-cache 安装配置及体验笔记

    varnish安装 ubuntu12安装参考 其他系统参考 如果选择了直接从源安装的方式的话,就不要自己去编译了,以免出现意外(悲剧的我,varnishlog 有点问题,之前先编译安装了,再从源安装, ...

  7. Statement和PrepareStatement区别

    网上很多都说区别是PrepareStatement可以批处理.实际上二者都是可以进行批处理的. 区别在于: 1.PrepareStatement要求预编译的sql必须是格式固定,使用占位符获取参数. ...

  8. jmeter性能测试 套路二

    1.一般我们不会通过下面这种去跑性能测试 2.我们会通过这种方式去跑性能测试 3.录制自动化 就用新的 4.录制性能测试  就用

  9. java使用字节流和字符流实现文件复制

    大家在Java开发中都会遇到文件复制的文件,众所周知,需要通过文件输入输出流实现. 那究竟该怎么做那,话不多说,直接上代码: 一,使用字节流复制文件 public class FileByteCopy ...

  10. PropertiesUtil demo

    package com.spl.save.wmos.base.util; import java.io.File; import java.io.FileInputStream; import jav ...