jquery_jquery를 기반으로 한 이미지 캐러셀 탭 전환 구성요소

현재 스크롤 효과만 추가되었으며 스크롤은 x 및 y 방향으로의 슬라이딩을 지원할 수 있습니다. 아무 효과도 없으며 나중에 다른 효과를 추가하고 확장해야 합니다. 글이 좀 거칠네요 ㅎㅎ. 분실 방지를 위해 여기에 메모를 남겨주세요.
　데모 주소: http://demo.jb51.net/js/2012/sinaapp/

코드 복사코드는 다음과 같습니다.

/**
* 빅맥 회전목마
*/
$.fn.loopSlider = function(option) {
var 설정 = {
//기본 표시 순서
initIndex: 1 ,
// 제목 노드에 스타일이 추가됨
className: "current",
// 캐러셀 방향, 기본값은 x축 캐러셀
direct: "x",
// 이전 버튼
prevBtn: "",
// 다음 버튼
nextBtn: "",
// 페이지 위로 및 아래로 버튼 스타일 비활성화
btnDisable: "disable ",
/ /버튼 누르기 스타일
btnTouchClass: "",
// 자동 캐러셀
auto: false,
// 자동 캐러셀 시간 간격
timeFlag: 4000,
// 캐러셀 효과 시간
scrollTime: 350,
// 회전판 효과
효과: "scroll",
// 회전판 요소가 하나만 있을 때 숨길지 여부 슬라이딩 버튼
hideBtn: true,
// 캐러셀 순환 여부
cycle: true,
// 캐러셀 콘텐츠 영역의 컨테이너 경로
contentContainer: "#imgScroll",
//캐러셀 콘텐츠 영역의 노드
contentChildTag: "li",
// 제목 캐러셀 영역의 컨테이너 경로
titleContainer: "#titleScroll",
// 제목 캐러셀 영역 노드
titleChildTag: "li",
/ / 캐러셀 콘텐츠 영역 배열
cont: [],
// 캐러셀 제목 영역 배열
탭: [] ,
// 현재 캐러셀 번호
현재: 0,
// 타이머
ptr: "",
// 캐러셀 콜백 함수, 캐러셀이 호출될 때마다 호출되며 매개변수는 다음과 같습니다. 현재 캐러셀의 일련번호
콜백: function() {
return true;
}
}
if (option) {
$.extend(setting, option)
}
//현재 호출 유형의 함수 초기화
setting.currentMethod = function() {
return true;
}
var boss = $(this)
// 첫 번째 요소가 아닌 경우 먼저 회전합니다.
(setting.initIndex != 1) {
setting.current = settings.initIndex - 1;
}
// 회전 노드 목록 가져오기
var childList = boss.find(setting.contentContainer " "setting.contentChildTag);
// 캐러셀 제목 노드 목록 가져오기
var titleList = boss.find(setting.titleContainer " "setting.titleChildTag)
// 콘텐츠에 각 캐러셀 노드 저장 Area
setting.cont = childList
// 제목의 캐러셀 노드 저장
setting.tabs = titleList;// 회전해야 하는 콘텐츠의 경우
if (setting.cont.length == 0) {
return;
}
// 콘텐츠 영역 및 제목 영역에 대한 인덱스 속성
childList 설정 .each(function(index) {
$(this).attr("index", index);
titleList.eq(index).attr("index", index)
}); arrows
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.current = 0;
}
//초기화
doInit();
if (childList.length return; /**
* 효과 없이 전환 처리
*/
var doScrollNone = {
프로세스: function(i) {
childList.eq(i).css("display", "block") .siblings(). css("display", "none");
titleList.eq(i).addClass(setting.className).siblings().removeClass(setting.className)
//record 현재 표시된 노드
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 ? 개수 1 : 개수) ));
childParent.css("top", -this.c_height * (setting.current))
}
titleList.eq(setting.current).addClass(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 ({
왼쪽: "-" (this.c_width * i)
},
(needFast ? 50 : settings.scrollTime),
function() {
if (setting.current == 개수) {
doScrollXY.processMove("left", $(this))
}
if (setting.auto) {
processAuto()
}
});
} 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 == 개수) {
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");
}
};
스위치(설정.효과) {
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 binEvent() {
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 == 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;
}
var index =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 = handlerTouchStart;
// 触摸屏幕事件
function handlerTouchStart(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("왼쪽") : childParent.css("상단");
if (setting.ptr) {
clearInterval(setting.ptr);
setting.ptr = null;
}var moveX = movetouch.pageX;
var moveY = movetouch.pageY;
var x = moveX - startX; var y = moveY - startY; // 여기서의 목적은 이미지를 왼쪽이나 오른쪽으로 슬라이드할 때 브라우저의 기본 이벤트를 방지하는 것입니다. 그러나 위아래로 슬라이드하는 경우에는 일반적으로 브라우저의 기본 이벤트를 직접 방지할 수 없습니다. 페이지가 정지할 때 Y축 방향보다 X축 방향으로 10픽셀 이상 더 슬라이드하도록 설정하면 위와 같은 상황이 발생하지 않도록 효과적으로 방지할 수 있습니다
if (Math.abs(x) - Math.abs (y) > 10) {
// 기본 이벤트 방지
moveEvent.preventDefault()
childParent.css("left", parseFloat(currentPosition) x);
moveDirect = x > 0 ? "sub": "추가"
} 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 =
}
// 화면
function handlerTouchEnd() {
//손가락의 이동 방향에 따라 표시할 다음 노드 번호를 결정
var fast = false
if (moveDirect == "add; ") {
if (setting.current == 개수) {
setting .current = 1;
} else {
setting.current = settings.current 1;
}
} else {
if (setting.current == 0) {
설정 .current = 개수 - 1
fast = true
} else {
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 = 개수;
} else {
setting.current = 설정 .current 1
}
var index = 설정.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 function(index) {
if (index index = 0
} else if (index >= 개수) {
색인 = 개수 - 1
}
setting.currentMethod.process(index)
}