jQuery_jquery를 기반으로 한 자동 전환 기능을 갖춘 페이드 인 및 아웃 슬라이드쇼 플러그인

사실은 그냥 슬라이드 쇼 효과인데, 플러그인으로 패키징되어 있습니다. 1. 고도로 맞춤화된 매개변수를 호출할 수 있습니다. 3 . 플러그인 파일은 압축 후 1.04k에 불과하며, 개발 버전은 3.29k입니다.

데모 및 다운로드 방법 1. jQuery 라이브러리 파일과 jQuery.iFadeSlide를 도입합니다(페이지에 다른 js 파일이 있는 경우 이를 병합하여 http 요청을 줄일 수 있음).

코드 복사 코드는 다음과 같습니다. &lt ;/script>

스타일 파일을 가져올 필요가 없으며, DEMO의 구조를 사용하는 경우 스타일을 프로젝트 페이지에 직접 병합할 수 있습니다. 2. 페이지에서 플러그인을 호출하고 전환 요소의 매개변수를 전달합니다. 비어 있거나 매개변수가 전달되지 않으면 플러그인의 기본값이 사용됩니다. 예를 들어 다음과 같습니다. code는 DEMO 데모의 세 가지 슬라이드 전환 호출 세트입니다.

코드 복사 코드는 다음과 같습니다. $(function(){ //SAMPLE-A 호출---매개변수가 전달되지 않으며 기본 매개변수가 호출됩니다. $('div#slide').iFadeSlide() ; //SAMPLE-B 호출---새 매개변수를 전달하면 원래 매개변수를 덮어쓰게 됩니다. 전달하지 않으면 기본값이 사용됩니다. $('div#slide_b').iFadeSlide({ field: $ ('div#slide_b a'), icocon:$('div.ico_b'), hoverCls: 'high_b', curIndex: 2, //인덱스 값이 시작됩니다. 0부터 설정되므로 여기에서 세 번째 항목을 강조 표시합니다. 간격: 2000 }) //SAMPLE-C 호출---새 매개변수를 전달하면 원래 매개변수와 기본값을 덮어씁니다. 전달되지 않으면 사용됩니다. $('div#slide_c').iFadeSlide({ field: $('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)

scrollFun(); //초기 자동 전환

/ /자동 전환을 중지하고 요소를 현재 인덱스로 전환하려면 인덱스 영역을 마우스로 밀어서 인덱스를 현재 값으로 초기화합니다( 그렇지 않으면 마우스를 끌 때 전환이 혼란스러워집니다.) ico.hover(function(){ stopFun() ; fadeFun(this); }, function(){ fadeFun(this); }).eq(iset.curIndex).mouseleave(); //초기 강조된 인덱스 값

//전환 영역은 마우스가 이동하면 자동 전환을 중지합니다. 끌어내면 자동으로 계속됩니다. iset.field.hover(function(){ stopFun(); }, function( ){ scrollFun(); }); >} }); })(jQuery);

기타 이 플러그인은 모든 형태의 상업적 사용을 포함하여 무료로 사용할 수 있습니다. 질문과 제안을 환영하며, 이 플러그인이 확장되기를 기대합니다.

테스트 파일 패키지 다운로드 http://xiazai.jb51.net/201008 /yuanma/jQuery_iFadeSlide.rar