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)寫(xiě)。我們的源碼調(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-05
jQuery基于muipicker實(shí)現(xiàn)仿ios時(shí)間選擇
本文給大家分享的是把jQuery的muipicker插件修改實(shí)現(xiàn)仿IOS時(shí)間選擇特效,非常的不錯(cuò),有需要的小伙伴可以參考下。2016-02-02
jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹
jquery的ajax()函數(shù)傳值中文亂碼解決方法介紹,需要的朋友可以參考下2012-11-11
JQuery給元素添加/刪除節(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-05
jQuery 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-03
jQuery+HTML5實(shí)現(xiàn)手機(jī)搖一搖換衣特效
經(jīng)常我們玩微信都會(huì)用到查到附近的人,都是在app上實(shí)現(xiàn)手機(jī)搖一搖的功能?,F(xiàn)在,我們將此技術(shù)搬移到手機(jī)web上,供大家學(xué)習(xí),有需要的小伙伴可以參考下。2015-06-06
jQuery 移動(dòng)端artEditor富文本編輯器
這篇文章主要介紹了jQuery 移動(dòng)端artEditor富文本編輯器 的相關(guān)資料,需要的朋友可以參考下2016-01-01

