jquery中$.fn和圖片滾動(dòng)效果實(shí)現(xiàn)的必備知識(shí)總結(jié)
前言
圖片滾動(dòng)效果相信對(duì)大家來(lái)說(shuō)都不陌生,爛大街的效果圖如下所示,js實(shí)現(xiàn)代碼很短,不過(guò)如果想做的話(huà),必須掌握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í)例也能訪(fǎng)問(wèn)到jquery()的原型方法和屬性。
開(kāi)發(fā)插件的方法:用$.fn擴(kuò)展jquery生成新的方法。
1、可以使用jquery.extend(object)擴(kuò)展jquery類(lèi)本身,為類(lèi)添加新的方法。
2、用jquery.fn.extend(object)給jquery對(duì)象添加方法。
下面用jquery.extend(object)擴(kuò)展jquery類(lèi),添加類(lèi)方法:
$.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ù)稱(chēng)之為函數(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代碼
很多都加了注釋?zhuān)喝绻鹙query、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è)按鈕,添加類(lèi)名current,并將每個(gè)同胞元素移除類(lèi)名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)文章
Jquery中給animation加更多的運(yùn)作效果實(shí)例
這篇文章介紹了Jquery中給animation加更多的運(yùn)作效果實(shí)例,有需要的朋友可以參考一下2013-09-09
jquery offset函數(shù)應(yīng)用實(shí)例
點(diǎn)擊一個(gè)按鈕,然后在按鈕的下方顯示一個(gè)div,當(dāng)按鈕位于角落時(shí),div的位置設(shè)定就需要調(diào)整,不然,div將顯示不完全.我打算使用offset()方法實(shí)現(xiàn)此功能2012-11-11
jquery關(guān)于事件冒泡和事件委托的技巧及阻止與允許事件冒泡的三種實(shí)現(xiàn)方法
大家都知道,jQuery事件觸發(fā)時(shí)有2種機(jī)制,一種是事件委托,另一種是事件冒泡,冒泡或默認(rèn)的事件發(fā)生,在某些時(shí)候是不需要的,在此就需要一些可以阻止冒泡和默認(rèn)的事件的方法,本文介紹三種方法做到不同程度的阻止,感興趣的朋友可以了解下,或許對(duì)你了解冒泡事件有所幫助2015-11-11
可以顯示單圖片,多圖片ajax請(qǐng)求的ThickBox3.1類(lèi)下載
ThickBox是一個(gè)基于JQuery類(lèi)庫(kù)的擴(kuò)展 以下的是ThickBox3.1的實(shí)例+代碼調(diào)用方法2007-12-12
一款基jquery超炫的動(dòng)畫(huà)導(dǎo)航菜單可響應(yīng)單擊事件
。這款導(dǎo)航菜單,初始時(shí)頁(yè)面中間一個(gè)按鈕,單擊按鈕,菜單從左側(cè)飛入頁(yè)中。再次單擊按鈕,導(dǎo)航飛入左側(cè)消息2014-11-11
jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式
下面小編就為大家?guī)?lái)一篇jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法
這篇文章主要介紹了jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法,需要的的朋友參考下吧2017-01-01
jquery實(shí)現(xiàn)一個(gè)全局計(jì)時(shí)器(商城可用)
這篇文章主要介紹了jquery實(shí)現(xiàn)一個(gè)全局計(jì)時(shí)器,商城一類(lèi)都可以使用2017-06-06

