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

前言

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对象

 1 $(".scrollBanner-icon").mouseover(function(){
 2             $(".scrollBanner-icon").css("background-color",obj.iconColor);
 3             // 。
 5             $(this).css("background-color",obj.iconHoverColor);
 6             
 7              var index = $(this).attr("data-index");
 8              //将计数器count修改为index的值，让banner图滚动的定时器能够刚好滚到所指图片的下一张
 9              count = index;
10             $(".scrollBanner-banner").css({
11                 "transition": "none",
12                 "margin-left":"-"+index+"00%"
13                 
14             });
15         });

效果：

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>

插件源码

  1 !function($){
  2     $.fn.scrollBanner = function(obj){
  3         // 声明各个属性的默认值,也就是设置插件可接收的接口
  4         var defaults = {
  5             images : [],
  6             scrollTime : 2000,
  7             bannerHeight : "500px",
  8             iconColor : "white",
  9             iconHoverColor : "orange",
 10             iconPosition : "center"
 11         }
 12         // 将默认值与传入的对象比对，如果传入的对象有未赋值属性，则使用默认对象的属性
 13         obj = $.extend(defaults,obj);
 14         console.log(obj);
 15         // 组件DOM布局
 16         $("body").css({"padding":"0px","margin" : "0px"});
 17 
 18         this.empty().append("<div class='scrollBanner-banner'></div>");
 19         $.each(obj.images,function(index,item){
 20             $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+item.href+"' target='_black'><img src='"+item.src+"' title='"+item.title+"' /></a></div>");
 21         });
 22         
 23         $(".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>");
 24         
 25         this.append("<div class='scrollBanner-icons'></div>");
 26         $.each(obj.images, function(index,item) {
 27             //data-*属性是H5允许用户自行在HTML标签上保存数据的属性。
 28             //保存在data-*中的数据，可以使用js读取调用
 29             $(".scrollBanner-icons").append("<span class='scrollBanner-icon' data-index ='"+index+"'></span>");
 30         });
 31         //设置css
 32         this.css({
 33             "width":"100%",
 34             "height":obj.bannerHeight,
 35             "overflow":"hidden",
 36             "position":"relative"
 37             
 38         });
 39         
 40         $(".scrollBanner-banner").css({
 41             "width":obj.images.length+1+"00%",
 42             "height":obj.bannerHeight,
 43             "transition": "all .5s ease"
 44         });
 45         
 46         $(".scrollBanner-bannerInner").css({
 47             "width" : 100/(obj.images.length+1)+"%",
 48             "height":obj.bannerHeight,
 49             "overflow":"hidden",
 50             "float":"left"
 51         });
 52         $(".scrollBanner-bannerInner img").css({
 53                 "width": "1920px",
 54                  "height":obj.bannerHeight,
 55                  "position": "relative",
 56                    "left": "50%",
 57                    "margin-left": "-960px"
 58         });
 59         
 60         $(".scrollBanner-icons").css({
 61             "position":"absolute",
 62             "z-index":"100",
 63             "width" :30*obj.images.length+"px",
 64             "bottom":"40px",
 65             "height":"7px"
 66         })
 67         
 68         switch (obj.iconPosition){
 69             case "left":
 70                 $(".scrollBanner-icons").css({
 71                     "left":"40px",
 72                 });
 73                 break;
 74             case "right":
 75                 $(".scrollBanner-icons").css({
 76                     "right":"40px",
 77                 });
 78                 break;
 79             case "center":
 80                 $(".scrollBanner-icons").css({
 81                     "left":"50%",
 82                     "margin-left":"-"+15*obj.images.length+"px"
 83                 });
 84                 break;
 85             default:
 86                 break;
 87         }
 88         
 89         
 90         $(".scrollBanner-icon").css({
 91                 "width": "15px",
 92                  "height": "5px",
 93                  "background-color": obj.iconColor,
 94                  "display": "inline-block",
 95                  "margin": "0px 5px"
 96                  
 97                  
 98         })
 99         
100         //小图标指上以后变色并且切换banner图
101         $(".scrollBanner-icon").mouseover(function(){
102             $(".scrollBanner-icon").css("background-color",obj.iconColor);
103             // ↓ 由span触发mouseover事件，则this指向这个span。
104             // ↓ 但是，这this是JS对象，必须使用$封装成JQuery对象。
105             $(this).css("background-color",obj.iconHoverColor);
106             
107              var index = $(this).attr("data-index");
108              //将计数器count修改为index的值，让banner图滚动的定时器能够刚好滚到所指图片的下一张
109              count = index;
110             $(".scrollBanner-banner").css({
111                 "transition": "none",
112                 "margin-left":"-"+index+"00%"
113                 
114             });
115         });
116         
117         //实现banner滚动
118         var count = 0 ;
119         $(".scrollBanner-icon:eq("+0+")").css("background-color",obj.iconHoverColor);
120         setInterval(function(){
121             count++;
122             $(".scrollBanner-banner").css({
123                 "margin-left":"-"+count+"00%",
124                 "transition": "all .5s ease"
125             })
126             $(".scrollBanner-icon").css("background-color",obj.iconColor);
127             $(".scrollBanner-icon:eq("+count+")").css("background-color",obj.iconHoverColor);
128             
129             if (count>=obj.images.length) {
130                 $(".scrollBanner-icon:eq("+0+")").css("background-color",obj.iconHoverColor);
131             }
132             if(count>obj.images.length){
133                 count=0;
134                 $(".scrollBanner-banner").css({
135                 "margin-left":"0px",
136                 "transition":"none"
137                 
138                 })
139 
140             }
141         },obj.scrollTime);
142     
143     }
144 }(jQuery);