JQuery 플러그 인 제작 실천 xMarquee 플러그 인 V 1.0

플러그 인 은 목록 의 요 소 를 왼쪽 이나 오른쪽으로 이동 해 야 합 니 다.(주,상하 방향 도 마찬가지 입 니 다.css 로 목록 요소 float 의 방향 을 제어 하면 됩 니 다~)2.마우스 가 특정한 요소 로 이동 할 때 요소 강조 표시(css 제어)를 바 꾸 고 재생 기 는 스크롤 을 중단 합 니 다.옮 긴 후에 계속 말 을 달리다.3.좌우 수 동 네 비게 이 션 단 추 를 선택 할 수 있 습 니 다.  원리 이동 목록 의 끝 요 소 를 첫 번 째 요소 앞으로 이동 하면 됩 니 다.미래의 확장(나중에 사용 하면 다시 봅 시다)여러 요소 가 동시에 이동 합 니 다.이동 시 효과;이동 후의 반전 함수;(주:이동 후의 리 셋 함 수 를 이용 하여 앨범 플러그 인 을 편리 하 게 만 들 수 있 고 관심 있 는 자신 이 쓸 수 있 습 니 다).개발 을 하 는 사람 은 한 마디 를 기억 해 야 한다.Do the simplest thing that could possibly work!가장 간단 하고 사용 가능 한 것 을 만들어 라,절대 지나치게 설계 하지 마라.xMarquee API 설명 1,dom 규약 은 아래 소스 코드~2,css 예시 아래 소스 코드~3,주 방법 호출

 
<script type="text/javascript"> 
//<![CDATA[ 
$("#wk_featured_items").xMarquee({}); 
//]]> 
</script> 

플러그 인 소스 코드

 
; (function($) { 
// Private functions. 
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); 
}; 
}; 
//refresh 
p._i = $(p._opts.i, p._t); 
//visibility 
p._i.filter(":gt(" + (p._opts.vnum - 1) + ")").hide(); 
}; //slide 
p.go = function(evt) { 
p.stop(); 
if (evt) { 
$(this).removeClass(p._opts.on); 
}; 
p._intervalID = window.setInterval(function() { p.slide(); }, p._opts.interval); 
}; //go 
//main plugin body 
$.fn.xMarquee = function(options) { 
// Set the options. 
options = $.extend({}, $.fn.xMarquee.defaults, options); 
p._opts = options; 
// Go through the matched elements and return the jQuery object. 
return this.each(function() { 
//NOTE:if wanna support multiple marquee instance,we should cache private variable via $(this).data("v",v) 
p._t = this; //marquee target; 
//silde items 
p._i = $(p._opts.i, p._t); 
p._cnt = p._i.size(); 
p._intervalID = null; 
//hide unwanted items 
p._i.filter(":gt(" + (p._opts.vnum - 1) + ")").hide(); 
p._i.hover(p.stop, p.go); 
//buttons registeration 
$(p._opts.btn0).click(function(evt) { p._opts.dir = 0; p.stop(); p.slide(); return false; }).mouseout(p.go); 
$(p._opts.btn1).click(function(evt) { p._opts.dir = 1; p.stop(); p.slide(); return false; }).mouseout(p.go); 
//trigger the slidebox 
p.go(); 
}); 
}; 
// Public defaults. 
$.fn.xMarquee.defaults = { 
on: 'cur', 
i: 'li', //slide items css selector 
interval: 5000, 
fadein: 300, 
fadeout: 200, 
vnum: 4, //visible marquee items 
dir: 1, //marquee direaction.1=right;0=left; 
btn0: '.prev', //prev button 
btn1: '.next'//next button 
}; 
})(jQuery); 

패키지 다운로드 주소