基於jquery的圖片輪播 tab切換組件_jquery

目前只添加了scroll和none的效果，scroll即滑動的效果，可以支持x和y方向的滑動；none就是沒有任何效果，只是顯示和隱藏，後續需要添加其他效果再做擴展，寫的有點水，呵呵，在此留筆，防止遺失。
　　Demo Address：http://demo.jb51.net/js/2012/sinaapp/

複製程式碼 > 程式碼如下:

/**
* 巨無霸輪播
*/
$.fn.loopSlider = function(option) {
var setting = {
// 預設顯示的順序
initIndex: 1 ,
// 加在title節點上的樣式
className: "current",
// 輪播方向，預設為x軸方向輪播
direct: "x",
// 上一張按鈕
prevBtn: "",
// 下一張按鈕
nextBtn: "",
// 上下翻頁按鈕停用的樣式
btnDisable: "disable ",
// 按鈕按下的樣式
btnTouchClass: "",
// 自動輪播
auto: false,
// 自動輪播時間間隔
timeFlag: 4000,
// 輪播效果時間
scrollTime: 350,
// 輪播效果
effect: "scroll",
// 在只有一個輪播元素的時候是否隱藏滑動按鈕
hideBtn: true,
// 是否循環輪播
cycle: true,
// 輪播的內容區的容器路徑
contentContainer: "#imgScroll",
// 輪播的內容區的節點
contentChildTag: "li",
// 標題輪播區域的容器路徑
titleContainer: "#titleScroll",
// 標題輪播區域的節點
titleChildTag: "li",
// 輪播的內容區的陣列
cont: [],
// 輪播的標題區的陣列
tabs: [] ,
// 目前輪播序號
current: 0,
// 定時器
ptr: "",
// 輪播回呼函數，每次輪播回呼函數，每次輪調用，參數為目前輪播的序號
callback: function() {
return true;
}
}
if (option) {
$.extend(setting, option);
}
// 初始化目前呼叫類型的函數
setting.currentMethod = function() {
return true;
}
var boss = $(this);
//如果不是第一個元素先輪播
if (setting.initIndex != 1) {
setting.current = setting.initIndex - 1;
}
// 取得輪播的節點清單
var childList = boss.find(setting.contentContainer " " setting.contentChildTag);
// 取得輪播標題節點清單
var titleList = boss.find(setting.titleContainer " " setting. ;
// 儲存內容區每一個輪播節點
setting.cont = childList;
// 儲存標題的輪播節點
setting.tabs = titleList;
// 如果沒有需要輪播的內容，直接回傳
if (setting.cont.length == 0) {
return;
}
// 為內容區和標題區設定index屬性
childList .each(function(index) {
$(this).attr("index", index);
titleList.eq(index).attr("index", index);
});
// 上下箭頭
var nextBtn = boss.find(setting.nextBtn);
var prevBtn = boss.find(setting.prevBtn);
// 長度
var counts = childList counts = childList .length;
// 輪播容器的父節點
var childParent = childList.parent();
var titleParent = titleList.parent();
if (childList.length setting.current = 0;
}
// 初始化
doInit();
if (childList.length return;
}
/**
* 處理無效果的切換
*/
var doScrollNone = {
process: function(i) {
childList.eq(i).css("display", "block").siblings ().css("display", "none");
titleList.eq(i).addClass(setting.className).siblings().removeClass(setting.className);
// 記錄目前顯示的節點
setting.current = i;
// 呼叫回呼函數
setting.callback(setting.current);
},
init: function() {
setting. currentMethod = doScrollNone;
bindEvent();
// 自動輪播
if (setting.auto) {
processAuto();
}
// 初始化的時候也調用回呼函數
setting.callback(setting.current);
}
};
var doScrollXY = {
c_width: 0,
c_height: 0, // 輪播元素的寬度
this.c_width = childList.width();
// 輪播元素的高度
this.c_height = childList.height();
// x軸方向輪播
if (setting.direct == "x") {
childParent.width(this.c_width * (childList.length > 1 ? counts 1 : counts));
childParent.css("left", -this.c_width * (setting.current));
} else {
childParent.height(this.c_height * (childList.length > 1 ? counts 1 : counts ));
childParent.css("top", -this.c_height * (setting.current));
}
titleList.eq(setting.current).addClass(setting.className).siblings ().removeClass(setting.className);
setting.currentMethod = doScrollXY;
// 綁定事件
bindEvent();
// 初始化的時候也呼叫回呼函數
settingting .callback(setting.current);
// 自動輪播
if (setting.auto) {
processAuto();
}
},
process: function(i , needFast) {
setting.current = i;
//alert(i)
if (setting.direct == "x") {
// 執行效果動畫
childParent. animate({
left: "-" (this.c_width * i)
},
(needFast ? 50 : setting.scrollTime),
function() {
if (setting. current == counts) {
doScrollXY.processMove("left", $(this));
}
if (setting.auto) {
processAuto();
}
}
});
} else {
childParent.animate({
top: "-" (this.c_height * i)
},
(needFast ? 50 : setting.scrollTime),
function() {
if (setting.current == counts) {
doScrollXY.processMove("top", $(this)) ;
}
if (setting.auto) {
processAuto();
}
});
}
if (i == counts) {
i = 0;
}
// 呼叫回呼函數
setting.callback(setting.current);
titleList.eq(i).addClass(setting.className).siblings().removeClass (setting.className);
},
processMove: function(direct, node) {
var childs = node.children();
for (var i = 1; i var removeNode = childs.eq(i).remove();
node.append(removeNode);
}
var first = childs.eq(0). remove();
node.append(第一個);
node.css(直接, "0");
}
};
switch (setting.effect) {
case "none":
doScrollNone.init();
休息;
案例「滾動」：
doScrollXY.init();
休息；
}
}
// 一些初始化操作
function doInit() {
childParent.css("position", "relative");
if (!setting.cycle) {
prevBtn.removeClass(setting.btnDisable );
nextBtn.removeClass(setting.btnDisable);
if (setting.current == 0) {
prevBtn.addClass(setting.btnDisable);
}
if (setting. current == counts - 1) {
nextBtn.addClass(setting.btnDisable);
}
}
// 只有一個元素，並且需要隱藏按鈕
if (childList.length prevBtn.hide();
nextBtn.hide();
}
// 複製第一個元素到最後
if (childList.length > 1) {
var cloneNode = childList.eq(0).clone();
cloneNode.attr("index", counts);
cloneNode.appendTo(childParent);
}
}
/**
* 綁定輪播事件
*/
function bindEvent() {
nextBtn && nextBtn.bind("click",
function(event) {
//按鈕已經被停用
if ($(this).hasClass(setting.btnDisable)) {
return;
}
var cur = setting.current; cur >= 0) {
prevBtn. removeClass(setting.btnDisable);
}
if (cur == counts - 2 && !setting.cycle) {
$(this).addClass (setting.btnDisable);
}
if (cur == 計數) {
setting.current = 1;
} else if (cur == 計數- 1) {
//輪播到最後一個
setting.current = counts;
} else {
setting.current = cur 1;
if (setting.ptr) {
clearInterval(setting .ptr);
setting.ptr = null
; }
$(this).addClass(setting.btnTouchClass);
setting.currentMethod.process(setting.current); );
prevBtn && prevBtn.bind("click",
function( ) {
if ($(this).hasClass(setting.btnDisable)) {
return;
}
var cur = setting.current;
if (cur nextBtn.removeClass(setting.btnDisable);
}
if (cur == 1 && !setting.循環) {
$(this).addClass(setting.btnDisable)
}
setting.current = cur == 0 ? 計數- 1 : cur - 1; ) {
clearInterval(setting.ptr);
setting.ptr = null;
$(this) .addClass(setting.btnTouchClass);
var fast = false; >if (cur == 0) {
fast = true
}
setting.currentMethod.process(setting.current, fast)
});
titleParent && titleParent.bind("click",
function(e) {
var element = $(e.target);
//取得輪播節點
while (element[ 0].tagName != titleList[0].tagName) {
element = element.parent()
}
if (setting.ptr) {
clearInterval(setting .ptr); 🎜>setting.ptr = null;
}
var index = parseInt(element.attr("index"), 10);
if (index != 0) {
prevBtn.removeClass(設定.btnDisable);
} else if (!setting.cycle) {
prevBtn.addClass(setting.btnDisable);
}
if (index != counts - 1) {
nextBtn.removeClass(setting.btnDisable);
} else if (!setting.cycle) {
nextBtn.addClass(setting.btnDisable);
}
Methodting.current.btnDisable);
}
Methodcesscurrent. (index);
});
childParent[0].ontouchstart = handleTouchStart;
// 觸摸螢幕事件
function handleTouchStart(event) {
var eltarement = $(event. );
// 取得標題節點
while (element[0].tagName != childList[0].tagName) {
element = element.parent();
}
if (event.targetTouches.length == 0) {
return;
}
var touch = event.targetTouches[0];
var startX = touch.pageX;
var startY = touch .pageY;
var moveDirect = "";
var currentPosition = setting.direct == "x" ? childParent.css("左") : childParent.css("頂部");
if ("左") : childParent.css("頂部");
if ("左") : childParent.css("頂部");
if ("左") : childParent.css("頂部");
if ("左") : childParent.css("頂部");
if ( setting.ptr) {
clearInterval(setting.ptr);
setting.ptr = null;
}
// 手指滑動事件
childParent[0].ontouchmove = handleTouchMove;
function handleTouchMove(moveEvent) {
var movetouch = moveEvent.targetTouches[0]; == 'x') {
var moveX = movetouch.pageX;
var moveY = movetouch.pageY;
var x = moveX - startX;
var y = moveY - startY
; // 這裡的目的是在左右滑動圖片的時候，阻止瀏覽器的預設事件，但是如果是上下滑動的情況，一般是滑動滾動條，不能直接就阻止瀏覽器預設事件，不然會導致使用者在上下滑動的時候頁面停止的情況，這裡設定的是在x軸方向要比在Y軸方向滑動至少多10的像素，可以有效的避免上述情況發生
if (Math.abs(x) - Math.abs (y) > 10) {
// 阻止預設的事件
moveEvent.preventDefault();
childParent.css("left", parseFloat(currentPosition) x);
moveDirect = x > 0 ? "sub": "add";
} else {
return;
}
} else {
// Y軸方向滾動
moveEvent.preventDefault();
var moveY = touch.pageY;
var y = moveY - startY;
childParent.css("top", parseFloat(currentPosition) y);
moveDirect = y > 0 ?sub": "add";
}
childParent[0].ontouchend = handleTouchEnd;
}
//手指離開螢幕
function handleTouchEnd() {
///依照手指移動的方向，判斷下一個要顯示的節點序號
var fast = false;
if (moveDirect == "add") {
if (setting.current == counts) {
setting.current = 1;
} else {
setting.current = setting.current 1;
}
} else {
if (setting.current == 0) {
setting.current = counts - 1;
fast = true;
} else {
setting.current = setting.current - 1;
}
}
// 呼叫對應的處理函數
}
}
// 呼叫對應的處理函數
setting.currentMethod.process(setting.current, fast);
childParent[0].ontouchend = null;
childParent[0].ontouchmove = null;
}
}
}
/**
* 自動輪播
*/
function processAuto() {
if (setting.ptr) {
clearInterval(setting.ptr);
setting.ptr = null;
}
// 設定輪播計時器
setting.ptr = setInterval(function() {
if (setting.current == counts) {
setting.current = 1;
} else if (setting.current == counts - 1) {
// 輪播到最後一個
setting.current = counts;
} else {
setting.current = setting.current 11 ;
}
var index = setting.current;
if (index != 0) {
prevBtn.removeClass(setting.btnDisable);
} else if (!setting.cycle) {
prevBtn.addClass(setting.btnDisable);
}
if (index != counts - 1) {
nextBtn.removeClass(setting.btnDisable);
} else if (! setting.cycle) {
nextBtn.addClass(setting.btnDisable);
}
setting.currentMethod.process(setting.current);
},
setting.timeFlaglag); >}
// 傳回一個函數，可以在呼叫返回函數，指定下一次需要輪播的圖片的序號，一般用在點擊一個小圖，然後需要查看大圖的情況下，那麼就只需要給大圖綁定一次輪播事件，再點擊某一張小圖的時候只需要呼叫函數，把對應的序號傳入即可
return function(index) {
if (index index = 0;
} else if (index >= counts) {
index = counts - 1;
}
setting.currentMethod.process(index);
}
setting.currentMethod.process(index);

} } }