jQuery自定義插件--banner圖滾動

時間 2019-11-17

原文原文鏈接

前言

jQuery是一個功能強大的庫，提供了開發JavaScript項目所需的全部核心函數。不少時候咱們使用jQuery的緣由就是由於其使用插件的功能，然而，有時候咱們仍是須要使用自定義代碼來擴展這些核心函數來提升開發效率。咱們知道， jQuery庫是爲了加快JavaScript的開發速度而設計的，經過簡化編寫JavaScript的方式，減小代碼量。因此，今天就帶你們瞭解一下jQuery自定義插件以及自定義插件案例---banner圖滾動。javascript

1、自定義插件

自定義插件通常有兩種類型：全局插件和局部插件；接下來，先了解一下這兩種插件；css

一、全局插件聲明——爲擴展jQuery類自己.爲類添加新的方法。
    $.extend({
    func:function(){} // func -->插件名
    })；

    全局插件調用：
    $.func();html

定義一個全局變量，其實就是在$.extend中定義對象裏面的方法進行編譯本身想要獲得的功能插件，並留出想要的變量接口；java

舉個小例子：jquery

JS:數組

<script type="text/javascript">
　　$.extend({
   　　 sayHello : function(){
       　　 alert("hello!!");
   　　 },
   　　 say : function(message){
     　　   alert("你說了："+message);
    　　}
　　});
  　　  $.sayHello();
   　　 $.say("hhahaha");
</script>

二、局部插件聲明
    $.fn.func = function(){}

    局部插件調用
    $("選擇器").func();
   app

舉個小例子：函數

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>

結果：this

提醒：在上述的小例子中，在$.fn聲明的插件函數中，能夠使用this代指調用這個插件的的對象節點。
並且，尤爲要記住，this是一個JQuery對象，須要操做jQuery，千萬不要用原生JS的DOM；

在上述的例子中，經過設置默認值來設置接口。經過調用插件，將所需設置的css樣式設置在函數的odj中，並返回一個新對象從而實現功能；

2、自定義插件-banner圖滾動

該插件實現banner滾動

1、插件的屬性：
images:接受數組類型，數組的每一個值應爲對象。對象具備屬性:src->圖片的路徑
title->圖片指上後的文字 href->圖片指上後的跳轉頁面
scrollTime:滾動時間，單位毫秒 5000
bannerHeight：Banner圖的高度

iconColor：圖片導航的顏色。默認white
iconHoverColor：圖片導航指上後的顏色。默認 orange
iconPosition：圖片導航的位置。可選left/right/center. 默認爲center

一、小圖標指上之後變色而且切換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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。