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