jquery中$.fn和圖片滾動效果實現(xiàn)的必備知識總結(jié)
前言
圖片滾動效果相信對大家來說都不陌生,爛大街的效果圖如下所示,js實現(xiàn)代碼很短,不過如果想做的話,必須掌握jquery、IIFE、setInterval等基礎(chǔ)以及$.fn用法:
jquery中$.fn用法
$.fn
是jquery的命名空間,如果對jquery源碼有過學(xué)習(xí),就不難發(fā)現(xiàn)源碼中有如下代碼:
jquery.fn=jquery.prototype={ init:function(selector,context){ /* *code */ } }
所以說jquery.fn
也就是jquery.prototype
的簡寫。我們的源碼調(diào)用的構(gòu)造函數(shù)jquery()
實例實際是jquery.fn.init()
的實例。
代碼如下:
jQuery = function( selector, context ) { //jqeruy內(nèi)部使用new創(chuàng)建返回另一個構(gòu)造函數(shù)實力是為了省去調(diào)用jquery時前面的new,并在后面定義了別名$; //構(gòu)造函數(shù)jquery()調(diào)用的是構(gòu)造函數(shù)jQuery.fn.init()的實例 return new jQuery.fn.init( selector, context ); },/*code*/
之后后續(xù)代碼有執(zhí)行了jquery.fn.init.prototype=jquery.fn
,用構(gòu)造函數(shù)jquery的原型對象覆蓋jquery.fn.init()
的原型對象,使得jquery.fn.init
實例也能訪問到jquery()
的原型方法和屬性。
開發(fā)插件的方法:用$.fn
擴展jquery生成新的方法。
1、可以使用jquery.extend(object)
擴展jquery類本身,為類添加新的方法。
2、用jquery.fn.extend(object)
給jquery對象添加方法。
下面用jquery.extend(object)
擴展jquery類,添加類方法:
$.extent({ add: function(a,b){ return a+b; } })
以后就可以直接使用$.add(1,2);//3
下面用jquery.fn.extend(object)
對jquery.prototype
擴展一個方法。
$.fn.extend({ [函數(shù)名]:fucntion(){ /*code*/ } });
以后可以直接使用$(“div”).
函數(shù)名()。
使用jquery中的$.fn封裝一個圖片滾動插件
這是一個使用到爛大街的一個插件了,不用說也知道是什么。不過具體是怎么實現(xiàn)的,繼續(xù)往下看。這個插件最主要的部分也就是js的實現(xiàn),html和css很簡單,不贅述。如果下面一些知識點已經(jīng)熟悉,可以選擇性跳過。
setInterval()
setInterval()
可以按指定時間不停的調(diào)用函數(shù),直到調(diào)用clearInterval或者關(guān)閉窗口。
setInterval(fucntion(){/*code*/},[time]) clearInterval(val_of_seInterval)//參數(shù)為setInterval的返回值
所以當(dāng)我們制作圖片滾動時,當(dāng)鼠標(biāo)指針在圖片上時,要停止圖片滾動,這里設(shè)置很簡單,只要添加一個on(‘mouseup,mouseover',fucntion(){})
事件即可;
具體實現(xiàn)代碼如下:
var time=setInterval(picTime,par.time); /* *code */ $(this).on('mouseup,mouseover',fucntion(){ clearInterval(time); })
保證圖片能夠一直循環(huán)滾動
在設(shè)計時,我們肯定不想圖片滾動完li.length
張就沒了。所以要設(shè)置一個哨兵index。
var index=0; fucntion picTime(){ index++; if(index=li.length){ index=0; } showpicture(index); }
相同的在點擊上一張,下一張圖片時,我們也要設(shè)置一個哨兵,讓其能夠一直循環(huán)下去。
IIFE
你肯定想要當(dāng)插件在定義調(diào)用完,加載瀏覽器時,這個插件效果可以立即呈現(xiàn)出來。那就要用到IIFE來構(gòu)造這個插件,從來達到快速加載,不受其他代碼干擾的作用。由于js中,在括號中進行函數(shù)聲明無效,所以被括號包起來的函數(shù)稱之為函數(shù)表達式。
IIFE的兩種形式如下:當(dāng)圓括號出現(xiàn)在匿名函數(shù)的末尾想要調(diào)用函數(shù)時,它會默認(rèn)將函數(shù)當(dāng)成是函數(shù)聲明。當(dāng)圓括號包裹函數(shù)時,它會默認(rèn)將函數(shù)作為表達式去解析,而不是函數(shù)聲明。
(function(){}()); (function(){})();
下面先來用??偷囊坏李}目來理解一下IIFE:
var myObject = { foo: "bar", func: function() { var self = this; console.log(this.foo); console.log(self.foo); (function() { console.log(this.foo); console.log(self.foo); }()); }}; myObject.func();
因為this指代的是myObject對象,所以第一個肯定輸出bar,而self是this的變量,等于是this,所以第二個輸出的還是bar,下面出現(xiàn)的就是我們上文定義的第一種IIFE形式,此時必須立即執(zhí)行匿名函數(shù),它的this指向的是window,所以輸出undefined,最后的self在自己的塊級作用域沒有定義,所以向上找到父級作用域的self,因此第四個輸出的還是bar。
低配版圖片特效js代碼
很多都加了注釋:如果jquery、js上文的知識掌握扎實,肯定不是很難。
//$()調(diào)用jquery對象 ,IIFE $(function () { $.fn.ScrollPic = function (params) { // return this.each(function () { var defaults = { ele: '.slider',//切換對象 Time: '2000',//自動切換時間 speed: '1000',//圖片切換速度 scroll: true,//是否滾動圖片,雖然肯定是讓它滾動的,但是我們還是設(shè)置一個意思一下。 arrow: false,//是否設(shè)置箭頭 number: true//是否添加右下角數(shù)字 }; //定義默認(rèn)參數(shù),其中若在html頁面設(shè)置了param是,這里的params會替換defaults var par = $.extend({}, defaults, params); var scrollList = $(this).find('ul');//找到ul標(biāo)簽元素 var listLi = $(this).find('li');//找到li標(biāo)簽元素 var index = 0; var pWidth = $(this).width(); var pHeight = $(this).height(); var len = $(this).find("li").length;//<li>標(biāo)簽數(shù)量 //設(shè)置li標(biāo)簽和img的寬、高 listLi.css({ "width": pWidth, "height": pHeight }); listLi.find('img').css({ "width": pWidth, "height": pHeight }); //設(shè)置ul標(biāo)簽的寬值為li的len倍/overflow:hidden scrollList.css("width", pWidth * len); //圖片循環(huán)滾動的關(guān)鍵所在 function picTimer() { index++; if (index == len) { index = 0; } showPics(index); } //自動切換函數(shù) if (par.scroll) { var time = setInterval(picTimer, par.Time); } else { $(".page-btn").hide(); } function showPics(index) { var nowLeft = -index * pWidth; //添加向左移動的特效 $(this).find(scrollList).animate({ "left": nowLeft }, par.speed); //找到與index相等的那個按鈕,添加類名current,并將每個同胞元素移除類名current $(this).find(paging).eq(index).addClass('current').siblings().removeClass('current'); } //鼠標(biāo)經(jīng)過數(shù)字按鈕的效果 if (par.number) { $(this).append('<div class="page-btn"></div>'); for (i = 1; i <= len; i++) { $(this).find('.page-btn').append('<span>' + i + '</span>') } var paging = $(this).find(".page-btn span"); paging.eq(index).addClass('current'); $(this).find(paging).on('mouseup mouseover',function (e) { e.preventDefault(); //獲取按鈕之間的相對位置,注意這里的$(this)。 index = $('div').find(paging).index($(this)); showPics(index) }); } //上一張,下一張效果 if (par.arrow) { $(this).append('<span class="leftarrow"></span><span class="rightarrow"></span>') var prev = $(this).find('span.leftarrow'); var next = $(this).find('span.rightarrow'); prev.on('click',function (e){ e.preventDefault(); index -= 1; if (index == -1) { index = len - 1; } showPics(index); });//上一頁 next.on('click',function (e){ e.preventDefault(); index += 1; if (index == len) { index = 0; } showPics(index); }); } //停止圖片的滾動 $(this).on('moveseup mouseover',function (e) { clearInterval(time); }); //清除計時器 $(this).on('mouseleave',function (e) { if (par.scroll) { time = setInterval(picTimer, par.Time); } else { clearInterval(time); $(this).find('$(".page-btn")').hide() } }); }) } });
下面是完整的html、css+js代碼鏈接。
本地下載:點擊這里
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
javascript 歷史記錄 經(jīng)常用于產(chǎn)品最近歷史瀏覽
在很多購物網(wǎng)站,都有“產(chǎn)品的瀏覽歷史記錄”,這是個很貼心的功能。2009-05-05jQuery基于muipicker實現(xiàn)仿ios時間選擇
本文給大家分享的是把jQuery的muipicker插件修改實現(xiàn)仿IOS時間選擇特效,非常的不錯,有需要的小伙伴可以參考下。2016-02-02jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹
jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹,需要的朋友可以參考下2012-11-11瘋狂Jquery第一天(Jquery學(xué)習(xí)筆記)
之前一直學(xué)習(xí),現(xiàn)在終于有時間來整理一下文檔了。以下文章都是自己學(xué)習(xí)Jquery 的筆記,希望能留下痕跡,也希望能幫助到您2012-05-05jQuery is not defined 錯誤原因與解決方法小結(jié)
今天在測試一個程序的時候,明顯已經(jīng)加載了jquery但總是提示jQuery is not defined,經(jīng)過多方測試終于發(fā)現(xiàn)了問題,這里簡單總結(jié)一下,需要的朋友可以參考下2017-03-03