溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
圖片滾動效果相信對大家來說都不陌生，爛大街的效果圖如下所示，js實現代碼很短，不過如果想做的話，必須掌握jquery、IIFE、setInterval等基礎以及$.fn用法：
jquery中$.fn用法
$.fn是jquery的命名空間,如果對jquery源碼有過學習，就不難發現源碼中有如下代碼：
jquery.fn=jquery.prototype={
init:function(selector,context){
/*
*code
*/
}
}
所以說jquery.fn也就是jquery.prototype的簡寫。我們的源碼調用的構造函數jquery（）實例實際是jquery.fn.init（）的實例。
代碼如下：
jQuery = function( selector, context ) {
//jqeruy內部使用new創建返回另一個構造函數實力是為了省去調用jquery時前面的new，并在后面定義了別名$;
//構造函數jquery()調用的是構造函數jQuery.fn.init()的實例
return new jQuery.fn.init( selector, context );
},/*code*/
之后后續代碼有執行了jquery.fn.init.prototype=jquery.fn，用構造函數jquery的原型對象覆蓋jquery.fn.init()的原型對象，使得jquery.fn.init實例也能訪問到jquery()的原型方法和屬性。
開發插件的方法：用$.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({
[函數名]：fucntion(){
/*code*/
}
});
以后可以直接使用$(“div”).函數名()。
使用jquery中的$.fn封裝一個圖片滾動插件
這是一個使用到爛大街的一個插件了，不用說也知道是什么。不過具體是怎么實現的，繼續往下看。這個插件最主要的部分也就是js的實現，html和css很簡單，不贅述。如果下面一些知識點已經熟悉，可以選擇性跳過。
setInterval()
setInterval()可以按指定時間不停的調用函數，直到調用clearInterval或者關閉窗口。
setInterval(fucntion(){/*code*/},[time])
clearInterval(val_of_seInterval)//參數為setInterval的返回值
所以當我們制作圖片滾動時，當鼠標指針在圖片上時，要停止圖片滾動，這里設置很簡單，只要添加一個on(‘mouseup,mouseover',fucntion(){})事件即可;
具體實現代碼如下：
var time=setInterval(picTime,par.time);
/*
*code
*/
$(this).on('mouseup,mouseover',fucntion(){
clearInterval(time);
})
保證圖片能夠一直循環滾動
在設計時，我們肯定不想圖片滾動完li.length張就沒了。所以要設置一個哨兵index。
var index=0;
fucntion picTime(){
index++;
if(index=li.length){
index=0;
}
showpicture(index);
}
相同的在點擊上一張，下一張圖片時，我們也要設置一個哨兵，讓其能夠一直循環下去。
IIFE
你肯定想要當插件在定義調用完，加載瀏覽器時，這個插件效果可以立即呈現出來。那就要用到IIFE來構造這個插件，從來達到快速加載，不受其他代碼干擾的作用。由于js中，在括號中進行函數聲明無效，所以被括號包起來的函數稱之為函數表達式。
IIFE的兩種形式如下：當圓括號出現在匿名函數的末尾想要調用函數時，它會默認將函數當成是函數聲明。當圓括號包裹函數時，它會默認將函數作為表達式去解析，而不是函數聲明。
(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，下面出現的就是我們上文定義的第一種IIFE形式，此時必須立即執行匿名函數，它的this指向的是window，所以輸出undefined,最后的self在自己的塊級作用域沒有定義，所以向上找到父級作用域的self，因此第四個輸出的還是bar。
低配版圖片特效js代碼
很多都加了注釋：如果jquery、js上文的知識掌握扎實，肯定不是很難。
//$()調用jquery對象 ，IIFE
$(function () {
$.fn.ScrollPic = function (params) {
//
return this.each(function () {
var defaults = {
ele: '.slider',//切換對象
Time: '2000',//自動切換時間
speed: '1000',//圖片切換速度
scroll: true,//是否滾動圖片,雖然肯定是讓它滾動的，但是我們還是設置一個意思一下。
arrow: false,//是否設置箭頭
number: true//是否添加右下角數字
};
//定義默認參數，其中若在html頁面設置了param是，這里的params會替換defaults
var par = $.extend({}, defaults, params);
var scrollList = $(this).find('ul');//找到ul標簽元素
var listLi = $(this).find('li');//找到li標簽元素
var index = 0;
var pWidth = $(this).width();
var pHeight = $(this).height();
var len = $(this).find("li").length;//<li>標簽數量
//設置li標簽和img的寬、高
listLi.css({ "width": pWidth, "height": pHeight });
listLi.find('img').css({ "width": pWidth, "height": pHeight });
//設置ul標簽的寬值為li的len倍/overflow:hidden
scrollList.css("width", pWidth * len);
//圖片循環滾動的關鍵所在
function picTimer() {
index++;
if (index == len) { index = 0; }
showPics(index);
}
//自動切換函數
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');
}
//鼠標經過數字按鈕的效果
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代碼鏈接。
完整代碼，圖片自加
本地下載：點擊這里
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
