JQuery實現banner圖滾動

時間 2019-12-12

原文原文鏈接

前言javascript

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

1.1 自定義插件基礎知識

在正式編寫屬於本身的插件以前，首先要了解自定義插件的相關知識。
html

1.1.1插件的聲明與調用

3.1 Android 事件基礎知識

一、全局插件聲明：
   　　 $.extend({
   　　　　 func1 : function(){};   //func1 --> 插件名
   　　　　 func2 : function(){};   //func2 --> 插件名
　　    });
全局插件調用
      $.func1();
      $.func2();
    二、局部插件聲明
   　　 $.fn.func = function(){};
    局部插件調用
      $("選擇器").func();java

實例代碼jquery

1.1.2全局插件

$.extend({
            say : function(message){
                alert("你說了："+message);
            },
            
        });
        
 $.say("哈哈哈哈");

代碼效果：
數組

1.1.3局部插件

聲明：app

<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插件的編寫過程。this

完整JS代碼

/*該插件實現了banner圖的滾動效果
 * 
 * 一、插件的屬性
 *  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>

效果圖

圖片是臨時找的，不太清晰，你們將就着看吧。

可是，圖片雖不清晰，該有的功能仍是有的。到了這裏，相信你們，應該也可以獨自，編寫一個屬於本身的插件了吧~~

相關標籤/搜索

每日一句

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