目前只添加了scroll和none的效果,scroll即滑動的效果,可以支持x和y方向的滑動;none就是沒有任何效果,只是顯示和隱藏,后續需要添加其他效果再做擴展,寫的有點水,呵呵,在此留筆,防止丟失。
Demo Address:http://demo.Vevb.com/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.titleChildTag);
// 保存內容區每一個輪播節點
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.length;
// 輪播容器的父節點
var childParent = childList.parent();
var titleParent = titleList.parent();
if (childList.length < setting.initIndex) {
setting.current = 0;
}
// 初始化
doInit();