사실은 그냥 슬라이드 쇼 효과인데, 플러그인으로 패키징되어 있습니다. 1. 고도로 맞춤화된 매개변수를 호출할 수 있습니다. 3 . 플러그인 파일은 압축 후 1.04k에 불과하며, 개발 버전은 3.29k입니다. 데모 및 다운로드 방법1. jQuery 라이브러리 파일과 jQuery.iFadeSlide를 도입합니다(페이지에 다른 js 파일이 있는 경우 이를 병합하여 http 요청을 줄일 수 있음). 코드 복사 코드는 다음과 같습니다. < ;/script> <div class="codebody" id="code29755"><script src="js/jquery.iFadeSldie.pack.js"></ script> <br><br> <br>스타일 파일을 가져올 필요가 없으며, DEMO의 구조를 사용하는 경우 스타일을 프로젝트 페이지에 직접 병합할 수 있습니다. </div> 2. 페이지에서 플러그인을 호출하고 전환 요소의 매개변수를 전달합니다. 비어 있거나 매개변수가 전달되지 않으면 플러그인의 기본값이 사용됩니다. 예를 들어 다음과 같습니다. code는 DEMO 데모의 세 가지 슬라이드 전환 호출 세트입니다. <br><br><br><div class="codetitle"> <span>코드 복사 <a style="CURSOR: pointer" data="21469" class="copybut" id="copybut21469" onclick="doCopy('code21469')"><u></u> 코드는 다음과 같습니다. </a> </span> </div>$(function(){ <div class="codebody" id="code21469">//SAMPLE-A 호출---매개변수가 전달되지 않으며 기본 매개변수가 호출됩니다. <br>$('div#slide').iFadeSlide() ; <br>//SAMPLE-B 호출---새 매개변수를 전달하면 원래 매개변수를 덮어쓰게 됩니다. 전달하지 않으면 기본값이 사용됩니다. <br>$('div#slide_b').iFadeSlide({ <br>field: $ ('div#slide_b a'), <br>icocon:$('div.ico_b'), <br>hoverCls: 'high_b', <br>curIndex: 2, //인덱스 값이 시작됩니다. 0부터 설정되므로 여기에서 세 번째 항목을 강조 표시합니다. <br>간격: 2000 <br>}) <br>//SAMPLE-C 호출---새 매개변수를 전달하면 원래 매개변수와 기본값을 덮어씁니다. 전달되지 않으면 사용됩니다.<br>$('div#slide_c').iFadeSlide({ <br>field: $('div#slide_c img'), <br>icocon: $('div.ico_c') , <br>outTime:100, <br>inTime: 200 <br>}) <br>}) <br><br> <br>플러그인 호출 부분은 플러그인 뒤에 위치해야 합니다. </div>핵심 코드<br><br><br><div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="99443" class="copybut" id="copybut99443" onclick="doCopy('code99443')"><u></u> 코드는 다음과 같습니다.</a><div class="codebody" id="code99443"> <br>;(function($){ <br>$.fn.extend({ <br>iFadeSlide: function(options){ <br>//플러그인 매개변수 초기화<br>var iset={ <br>field:$('div#slide img'), //요소 컬렉션 전환<br>icocon:$('div.ico'), //인덱스 컨테이너<br>hoverCls:'high', //전환 현재 인덱스 강조 스타일<br>curIndex:0, //0부터 시작하는 기본 강조 인덱스 값<br>outTime:200, //요소 페이드 아웃 시간(ms) <br>inTime:300, //요소 페이드 -in 시간(ms) <br>interval:3000 //요소 전환 간격(ms) <br>options=options || {} <br>$.extend(iset,options); 옵션에 새로운 값이 있으면 iset에 해당 값을 덮어쓰고, 그렇지 않으면 기본값을 사용합니다. <br>//전환 요소의 양에 따라 해당 인덱스 값 목록을 생성하여 전환에 삽입합니다. Area <br> var ulcon = "<ul>"; <br>iset.field.each(function(i){ <br>ulcon = ulcon '<li>' (i 1) '</li> '; <br>}); <br>ulcon = '</ul>'; <br>iset.icocon.append(ulcon) <br><br>var ico = iset.icocon.find('li '); / /인덱스 목록 컬렉션<br>var size = iset.field.size(); //스위치 요소 양<br>var index = 0; //초기 인덱스 값<br>varclearFun=null; >//페이드 아웃 페이드 인 기능 <br>var fadeFun = function(obj){ <br>index = ico.index(obj); //현재 인덱스 값 가져오기<br>//현재 표시되는 요소 페이드 아웃 그리고 인덱스 값 <br>iset.field.filter(':visible').fadeOut(iset.outTime, function(){ <br>iset.field.eq(index).fadeIn(을 통해 페이드 인할 요소를 찾습니다. iset.inTime); <br>}); <br>//현재 인덱스에 강조 스타일을 추가하고 형제 요소에서 강조 스타일을 제거합니다. <br>$(obj).addClass(iset.hoverCls).siblings() .removeClass(iset.hoverCls); <br>}; <br>//스위치 함수<br>varchangeFun = function(){ <br>index; //누적 인덱스 값<br>if (index == size) {index = 0}; //인덱스 값이 전환된 요소의 양과 같을 때 0으로 초기화됩니다. <br>ico.eq(index).trigger('mouseleave') //마우스 아웃을 시뮬레이션합니다. 현재 인덱스에 대한 요소 영역 이벤트 <br>}/ /자동 전환 기능 <br>var scrollFun = function(){ <br>clearFun = setInterval(function(){ <br>changeFun() <br> }, iset.interval); <br>//자동 전환 기능 중지<br>var stopFun = function(){ <br>clearInterval(clearFun) <br><br> scrollFun(); //초기 자동 전환<br><br>/ /자동 전환을 중지하고 요소를 현재 인덱스로 전환하려면 인덱스 영역을 마우스로 밀어서 인덱스를 현재 값으로 초기화합니다( 그렇지 않으면 마우스를 끌 때 전환이 혼란스러워집니다.) <br>ico.hover(function(){ <br>stopFun() ; <br>fadeFun(this); <br>}, function(){ <br>fadeFun(this); <br>}).eq(iset.curIndex).mouseleave(); //초기 강조된 인덱스 값 <br><br>//전환 영역은 마우스가 이동하면 자동 전환을 중지합니다. 끌어내면 자동으로 계속됩니다. <br>iset.field.hover(function(){ <br>stopFun(); <br>}, function( ){ <br>scrollFun(); <br>}); >} <br>}); <br>})(jQuery); <br><br> <br>기타<br>이 플러그인은 모든 형태의 상업적 사용을 포함하여 무료로 사용할 수 있습니다. <br>질문과 제안을 환영하며, 이 플러그인이 확장되기를 기대합니다. <br><br>테스트 파일 패키지 다운로드</div>http://xiazai.jb51.net/201008 /yuanma/jQuery_iFadeSlide.rar<br></span></div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
