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

플러그인 소스 코드

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); 🎜>


패키지 다운로드 주소