jQuery 패키지 download_jquery를 기반으로 자동 전환 기능을 갖춘 페이드인 및 페이드아웃 슬라이드쇼 플러그인

;(function($){
$.fn.extend({
iFadeSlide: function(options){
//플러그인 매개변수 초기화
var iset={
field:$('div#slide img'), //요소 컬렉션 전환
icocon:$('div.ico'), //인덱스 컨테이너
hoverCls:'high', //전환 현재 인덱스 강조 스타일
curIndex:0, //0부터 시작하는 기본 강조 인덱스 값
outTime:200, //요소 페이드 아웃 시간(ms)
inTime:300, //요소 페이드 -in 시간(ms)
interval:3000 //요소 전환 간격(ms)
options=options || {}
$.extend(iset,options); 옵션에 새로운 값이 있으면 iset에 해당 값을 덮어쓰고, 그렇지 않으면 기본값을 사용합니다.
//전환 요소의 양에 따라 해당 인덱스 값 목록을 생성하여 전환에 삽입합니다. Area
var ulcon = "

";
iset.field.each(function(i){
ulcon = ulcon '
• ' (i 1) '
';
});
ulcon = '

';
iset.icocon.append(ulcon)
var ico = iset.icocon.find('li'); //인덱스 목록 Set
var size = iset.field.size(); //스위치 요소 양
var index = 0; //초기 인덱스 값
varclearFun=null>// 페이드 아웃 및 인 기능
var fadeFun = function(obj){
index = ico.index(obj); //현재 인덱스 값을 가져옵니다
//현재 표시되는 요소를 페이드 아웃하고 요소를 찾습니다. 인덱스 값을 통해 페이드 인하려면
iset.field.filter(':visible').fadeOut(iset.outTime, function(){
iset.field.eq(index).fadeIn(iset.inTime) ;
});
//현재 인덱스에 강조 스타일을 추가하고 형제 요소에서 강조 스타일을 제거합니다.
$(obj).addClass(iset.hoverCls).siblings().removeClass(iset .hoverCls);
} ;
//전환 함수
varchangeFun = function(){
index; //누적 인덱스 값
if (index == size){index = 0 }; //인덱스 값이 같을 때 요소의 양을 전환할 때 0으로 초기화됩니다.
ico.eq(index).trigger('mouseleave') //마우스 그리기 이벤트를 시뮬레이션합니다. 현재 인덱스의 요소 영역
}
//자동 전환 함수
var scrollFun = function(){
clearFun = setInterval(function(){
changeFun()
}, iset.interval);
//자동 전환 기능 중지
var stopFun = function(){
clearInterval(clearFun)
scrollFun() ; //초기 자동 전환
//자동 전환을 중지하려면 인덱스 영역에서 마우스를 스와이프합니다. 그리고 요소를 현재 인덱스로 전환합니다. 마우스 스트로크는 인덱스를 현재 값으로 초기화합니다(그렇지 않으면 마우스 스트로크가 혼란을 야기합니다). )
ico.hover(function(){
stopFun();
fadeFun(this);
}, function(){
fadeFun(this);
}). eq(iset.curIndex).mouseleave(); //초기 강조 인덱스 값
//스위치 영역 마우스가 안으로 이동하면 자동 전환이 중지되고, 마우스가 밖으로 이동하면 자동 전환이 계속됩니다.
iset. field.hover(function(){
stopFun();
}, function(){
scrollFun();
})
}
}); })(jQuery)