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

생각은 참 이상한 일이다. 일단 막다른 골목에 빠지면 빠져나오기 어렵다. 잠시 마음을 가라앉히고 낡은 생각을 완전히 버려야만 새로운 탈출구를 찾을 수 있다.
사실은. 슬라이드쇼 효과.

플러그인 기능

1. 매개변수를 고도로 맞춤화할 수 있습니다.
3. 플러그인 파일이 작습니다. 압축 후 1.04k, 개발 버전은 3.29k입니다.


데모 및 다운로드 데모를 보려면 여기를 클릭하세요

여기를 클릭하세요 플러그인 다운로드
사용 지침

jQuery를 소개합니다. 라이브러리 파일 및 jQuery.iFadeSlide.pack.js 플러그인 파일(페이지에 다른 js 파일이 있는 경우 해당 파일과 병합할 수 있음) http 요청을 줄이려면 위치 사용자 정의를 도입하세요.

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

스타일 파일을 가져올 필요가 없습니다. DEMO에서 스타일을 프로젝트 페이지에 직접 병합할 수 있습니다.
2. 전환 요소의 매개변수를 전달합니다. 비어 있거나 매개변수를 전달하지 않으면 플러그인의 기본 매개변수에 따라 실행됩니다. 예를 들어 다음 코드는 슬라이드 전환 호출 3개 세트입니다. DEMO 데모에서:

코드 복사 코드는 다음과 같습니다: $(function( ){

//SAMPLE -A 호출 --- 매개변수가 전달되지 않으며 기본 매개변수가 호출됩니다.

$('div#slide').iFadeSlide()
//SAMPLE-B 호출 --- 새 매개변수가 전달되면 원래 매개변수를 덮어쓰고
$('div#slide_b').iFadeSlide({
필드: $('div#slide_b a)에 전달되지 않은 경우 기본값을 사용합니다. '),
icocon:$(' div.ico_b'),
hoverCls: 'high_b',
curIndex: 2, //인덱스 값은 0부터 시작하므로 여기서 세 번째 항목이 강조 표시됩니다.
간격: 2000
}) ;
//SAMPLE-C 호출---새 매개변수를 전달하면 원래 매개변수를 덮어쓰게 됩니다. 전달되지 않으면 기본값이 사용됩니다.
$(' div#slide_c').iFadeSlide({
필드: $('div#slide_c img'),
icocon: $('div.ico_c'),
outTime:100,
inTime: 200
});
}) ;


호출 플러그인 부분은
핵심 코드

코드 복사

코드는 다음과 같습니다.

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