jquery_jqueryに基づく画像カルーセルタブ切り替えコンポーネント

現在、スクロール効果となしのみがスライド効果として追加されており、x 方向と y 方向のスライドをサポートします。なしは効果がなく、後で他の効果を追加および展開する必要があります。文章は少し乱暴ですが、紛失しないようにここにメモを残します。
デモアドレス: http://demo.jb51.net/js/2012/sinaapp/

コードをコピーコードは次のとおりです:

/**
* ビッグマック カルーセル
*/
$.fn.loopSlider = function(option) {
var settings = {
//デフォルトの表示順序
initIndex: 1 ,
// タイトル ノードにスタイルを追加します
className: "current",
// カルーセルの方向、デフォルトは x 軸カルーセルです
direct: "x",
// 前へbutton
prevBtn: "",
// 次へボタン
nextBtn: "",
// ページ上下ボタンのスタイルを無効にしました
btnDisable: "disable ",
/ /ボタン押下スタイル
btnTouchClass: "",
// 自動カルーセル
auto: false,
// 自動カルーセル時間間隔
timeFlag: 4000,
// カルーセル効果時間
scrollTime: 350,
// カルーセル効果
effect: "scroll",
// カルーセル要素が 1 つしかない場合に非表示にするかどうか スライディング ボタン
hideBtn: true,
// カルーセルを循環するかどうか
cycle: true,
// カルーセル コンテンツ領域のコンテナ パス
contentContainer: "#imgScroll",
//カルーセル コンテンツ領域のノード
contentChildTag: "li",
// タイトルカルーセル領域のコンテナパス
titleContainer: "#titleScroll",
// タイトルカルーセル領域 Node
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 = settings.initIndex - 1;
}
// 回転ノードのリストを取得します
var childList = Boss.find(setting.contentContainer " " settings.contentChildTag);
// カルーセル タイトル ノード リストを取得します
var titleList = Boss.find(setting.titleContainer " " settings.titleChildTag)
// コンテンツ内の各カルーセル ノードを保存しますarea
setting.cont = childList;
// タイトルのカルーセル ノードを保存します
setting.tabs = titleList;
// 回転する必要があるコンテンツの場合は、直接
if (setting.cont.length == 0) {
return;
}
// コンテンツ領域とタイトル領域のインデックス属性
childList を設定します。
$(this).attr("インデックス", インデックス);
titleList.eq(index).attr("インデックス", インデックス);
// 上下arrows
var nextBtn = Boss.find(setting.nextBtn);
var prevBtn = Boss.find(setting.prevBtn);
// Length
var counts = childList
// カルーセルコンテナの親ノード
var childParent = childList.parent();
if (childList.length < settings.initIndex) {
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() {
settings.currentMethod = doScrollNone ;
bindEvent();
// 自動カルーセル
if (setting.auto) {
processAuto();
// 初期化中にコールバック関数も呼び出します>setting.callback(setting.current);
}
};
var doScrollXY = {
c_width: 0,
c_height: 0,
init : function() {
//カルーセル要素の幅
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.className).siblings ().removeClass(setting.className);
setting.currentMethod = doScrollXY;
// バインディング イベント
bindEvent(); // コールバック関数は初期化中にも呼び出されます。 .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 : settings.scrollTime),
function() {
if (setting.current) == カウント) {
doScrollXY.processMove("left", $(this))
}
if (setting.auto) {
}
});
} else {
childParent.animate({
top: "-" (this.c_height * i)
},
(needFast ? 50 : settings.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(first);
node.css(direct, "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("インデックス", カウント);
cloneNode.appendTo(childParent);
}
}
/**
* バインドカルーセルイベント
*/
function bindingEvent() {
nextBtn && nextBtn.bind("click",
function(event) {
// 如果按钮已被禁止
if ($(this).hasClass(setting.btnDisable)) {
return;
}
var cur = settings.current; cur >= 0) {
prevBtn.removeClass(setting.btnDisable);
}
if (cur == counts - 2 && !setting.cycle) {
$(this).addClass (setting.btnDisable);
}
if (cur == counts) {
setting.current = 1;
} else if (cur == counts - 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 = settings.current;
if (cur nextBtn.removeClass(setting.btnDisable);
}
if (cur == 1 && !setting.サイクル) {
$(this).addClass(setting.btnDisable);
setting.current = cur == 0 ? counts - 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;
}
varindex = parseInt(element.attr("index"), 10);
if (index != 0) {
prevBtn.removeClass( settings.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(index);
});
childParent[0].ontouchstart = handleTouchStart;
// 触摸画面イベント
function handleTouchStart(event) {
var element = $(event.target);
// 到達点
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 = settings.direct == "x" ? childParent.css("left") : childParent.css("top");
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 x = moveX - startX;
// ここでの目的は、画像を左右にスライドさせるときにブラウザのデフォルト イベントを防ぐことです。ただし、画像が上下にスライドしている場合は、通常、ブラウザのデフォルト イベントを直接防ぐことはできません。ページが停止すると、ユーザーが上下にスライドするようになります。ここでの設定では、Y 軸方向よりも X 軸方向に少なくとも 10 ピクセル多くスライドします。これにより、上記の状況が発生するのを効果的に回避できます
if (Math.abs(x) - Math.abs (y) > 10) {
// デフォルトのイベントを阻止します
moveEvent.preventDefault();
childParent.css("left", parseFloat(currentPosition) x);
moveDirect = x > 0 ? "sub": "add";
}
} else {
/Y 軸方向にスクロール
moveEvent.preventDefault() ;
var moveY = touch.pageY;
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 = settings.current 1;
}
} else {
if (setting.current == 0) {
setting.current = counts - 1;
fast = true;
} else {
setting.current = settings.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 = カウント;
} else {
setting.current = 設定 .current 1;
var インデックス = settings.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.timeFlag) ;
}
// return 関数を呼び出して、必要な画像のシリアル番号を指定できます。これは通常、小さな画像をクリックしてから大きな画像を表示する必要がある場合に使用されます。その場合は、小さな画像をクリックしたときにカルーセル イベントをバインドするだけで済みます。この関数を呼び出して、対応するシリアル番号を渡します。
if (index index = 0; else if (index >=) counts) {
index = counts - 1;
setting.currentMethod.process(index);