JQuery 플러그인 제작 실습 xMarquee 플러그인 V1.0_jquery

플러그인 요구 사항
1. 목록의 요소를 왼쪽이나 오른쪽으로 이동합니다. (참고로 위쪽과 아래쪽 방향은 동일합니다. CSS를 사용하여 목록 요소의 부동 방향을 제어합니다~)
2. 요소에 대한 마우스 요소가 강조 표시되면(CSS 제어) 플레이어가 스크롤을 중지합니다. 이동한 후 계속 경주하세요. .
3. 선택적으로 왼쪽 및 오른쪽 수동 탐색 버튼.

구현원리
목록 끝에 있는 요소를 첫 번째 요소 앞으로 이동시키면 됩니다.
향후 확장(향후 필요하면 참조)
여러 요소가 동시에 이동합니다. 이동 후 콜백 기능을 사용하면 편리하게 사진을 만들 수 있습니다. 앨범 플러그인, 관심 있으신 분은 적어주세요). 개발자는 한 문장을 기억해야 합니다. 가능한 가장 간단한 일을 하십시오! 가장 단순하고 유용한 것을 만들고, 지나치게 디자인하지 마세요.
xMarquee API 설명
1. DOM 사양
아래 소스코드 참조~ 2. CSS 예시
아래 소스코드 참조~
3. Main 메소드 호출

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

플러그인 소스 코드

코드 복사

코드는 다음과 같습니다. (함수 ($) { // 비공개 함수 .

var p = {}

p.stop = function(evt) { if (evt) { $(this).addClass(p._opts.on) ); }; window.clearInterval(p._intervalID ) };
p.slide = function() {
if (p._opts.dir == 1) {
p._i.filter( ":last").hide().fadeIn (p._opts.fadein).prependTo(p._t)
} else {
if (p._opts.vnum < p._cnt) {
p._i.filter(":first ").fadeOut(p._opts.fadeout).appendTo(p._t)
p._i.filter(":eq(" p._opts.vnum " )").fadeIn(p._opts.fadein );
} else {
p._i.filter(":first").hide().appendTo(p._t).fadeIn(p._opts .fadein);
};
//새로 고침
p._i = $(p._opts.i, p._t); ._i.filter(":gt(" ( p._opts.vnum - 1) ")").hide()
}; //슬라이드
p.go = function(evt) {
p.stop();
if (evt) {
$(this).removeClass(p._opts.on)
}; p._intervalID = window.setInterval( ) { p.slide(); }, p ._opts.interval);
}; //go
//메인 플러그인 본문
$.fn.xMarquee = function(options) {
// 옵션을 설정합니다.
options = $.extend({}, $.fn.xMarquee.defaults, options)
p._opts = options
// 일치하는 요소를 살펴보고 반환합니다.
return this.each (function() {
//참고: 여러 선택 윤곽 인스턴스를 지원하려면 $(this).data("v",v) p._t = this; //마퀴 대상;
//실드 항목
p._i = $(p._opts.i, p._t)
p._cnt = p._i .size();
p._intervalID = null;
//원치 않는 항목 숨기기
p._i.filter(":gt(" (p._opts.vnum - 1) ")"). hide();
p._i.hover(p.stop, p.go)
//버튼 등록
$(p._opts.btn0).click(function(evt) { p. _opts.dir = 0; p.slide(); return false }).mouseout(p.go)
$(p._opts.btn1).click(function(evt) p._opts.dir = 1; p.stop(); return false; }).mouseout(p.go)
//슬라이드박스 트리거

});
};
// 공개 기본값
$.fn.xMarquee.defaults = {
on: 'cur',
i: 'li', / /슬라이드 항목 CSS 선택기
간격: 5000 ,
fadein: 300,
fadeout: 200,
vnum: 4, //보이는 선택 윤곽 항목
dir: 1, //선택 윤곽 방향. 1=오른쪽;0=왼쪽;
btn0: '.prev', //이전 버튼
btn1: '.next'//다음 버튼
})(jQuery); 🎜>


패키지 다운로드 주소