이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (3)_javascript 기술

사실 이전의 좋은 코드 구조에서는 컨트롤러 추가가 매우 간단합니다(^_^ 이래서 초기 아키텍처의 코드 구조가 매우 중요하다고 말씀드렸습니다!)
먼저 아이디어에 대해 말씀드리겠습니다. 컨트롤러 추가 방법:
캐러셀 요소 수에 따라 각 요소에 해당 제어 버튼을 추가합니다. (여기서는 a 태그를 직접 사용하여 수행합니다. 의미를 고려하면 ul 또는 ol을 사용할 수 있습니다.) , 작성 스타일의 편의성을 고려하여 컨트롤러 먼저 상위 태그를 만든 다음 각 컨트롤 버튼을 컨트롤러 상위 태그에 차례로 추가한 다음 상위 태그를 캐러셀 모듈에 추가할 수 있습니다. 그런 다음 해당 요소에 해당 CSS 스타일을 추가합니다
좋습니다. 아이디어에 대해 이야기한 후 컨트롤러 그리기를 시작하겠습니다. 따라서 다음과 같이 작성할 수 있습니다.

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

init: function(options) { //옵션 매개변수: id (필수): 사진 목록 상위 태그 id; auto (선택 사항): 자동 실행 시간; 인덱스 (선택 사항): 시작 사진 일련 번호
var wp = H$(options . id), // 사진 목록의 상위 요소를 가져옵니다
ul = H$$('ul',wp)[0], // 가져옵니다
li = this.li = H$$('li ', ul);
this.a = options.auto?options.auto:2; //자동 실행 간격
this.index = options.position?options.position:0; running (0부터 시작)
this.l = li.length;
this.cur = this.z = 0; //현재 표시된 사진 번호&&z-index 변수
nav_wp = document.createElement('div '); //먼저 div를 컨트롤러의 상위 태그로 만듭니다.

을 사용할 수도 있습니다. 의미가 더 좋을 수 있으므로 여기서는 변경하지 않겠습니다.
.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //스타일 설정
/* ==페이드 인 및 페이드 아웃 기능 추가==*/
for(var i =0;ithis.li[i].o = 100; //각 이미지에 대한 투명도 변경 설정
this.li[i] .style.opacity = this.li[i].o/100; //IE가 아닌 경우에는 opacity를 사용하세요
this.li[i].style.filter = 'alpha(opacity=' this.li[ i].o ' )'; //IE는 필터를 사용합니다.
/* == Draw 컨트롤러 == */
var nav = document.createElement('a') //여기에서는 a를 직접 사용합니다. 컨트롤러를 제어하기 위한 태그, 의미론을 고려한다면 li
nav.className = options.navClass?options.navClass:'fader-nav'; //컨트롤러 클래스, 기본값은 'fader-nav'입니다.
nav.innerHTML = i 1;
nav.onclick = new Function(this.anchor '.pos(' i ')'); //onclick 이벤트를 바인딩하고 이전에 작성된 pos() 함수를 직접 호출합니다. 🎜>nav_wp.appendChild(nav);
}
wp.appendChild(nav_wp); //컨트롤러가 페이지에 추가합니다.
this.pos(this.index); },


위 코드는 컨트롤러를 추가한 후의 완전한 init()로, 총 7줄의 코드가 추가됩니다.

이 글을 쓰면서 일부 친구들은 시도해 보고 싶어했지만 자신이 추가한 컨트롤러가 보이지 않는다는 사실을 알게 되었을 수도 있습니다. . .
하하, 잊지 마세요. 우리는 z-index를 사용하여 사진 표시 및 숨기기를 제어합니다. 다른 사람들의 z-index는 처음부터 하나씩 계속 증가하지만 컨트롤러의 경우 기본 z-index는 0입니다. , 물론 그것을 보여주는 것은 불가능합니다. 따라서 이 컨트롤러의 z-index를 제어하려면 또 다른 코드 줄을 추가해야 합니다. 항상 캐러셀 요소 위에 위치하도록 합니다.
　그러니까 변환 함수 pos()에서

코드를 복사하세요 코드는 다음과 같습니다

pos:function(i){

clearInterval(this.li.a); //자동 변경 타이머 지우기
clearInterval(this.li[i].f); 페이드 효과 타이머
this.z ;
this.li[i].style.zIndex = this.z; //다음 사진의 z-index를 매번 1씩 늘립니다.
nav_wp.style. zIndex = this.z 1; //컨트롤러의 z-index는 항상 캐러셀 요소의 가장 큰 z-index보다 1 커야 합니다.
this.cur = i; 현재 표시된 이미지
this.li .a = false; //클리어 타이머가 완료되었음을 나타내는 표시를 만듭니다.
//this.auto(); run
if(this.li[i].o> ;=100){ //이미지 투명도를 투명으로 설정한 후
this.li[i].o = 0
this.li; [i].style.opacity = 0;
this.li[i].style.filter = 'alpha(opacity=0)'
}
this.li[i].f = setInterval (new Function(this.anchor '.fade(' i ')'),20);
},


위 코드는 실제로 6행에 한 문장을 추가합니다.

추가된 8개의 문장과 해당 CSS를 통해 컨트롤러의 형태가 갖춰지기 시작했습니다. 컨트롤러 CSS는 이렇습니다

코드를 복사하세요 코드는 다음과 같습니다..fader-nav{ 디스플레이:인라인 블록;여백-오른쪽:8px;색상:#fff;패딩:2px 6px;배경:#333;테두리:1px 솔리드 #fff;글꼴-가족:Tahoma;글꼴-무게:굵게;글꼴-크기: 12px;커서: 포인터;}

프로토타입 효과를 살펴보겠습니다.

<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>2단계</title> <style type="text/css"><!-- #fader{position:relative;overflow:hidden;height:300px;width:500px} #fader li{position:absolute;left:0;top:0;} ul,li{list-style:none;margin:0;padding:0} img{display:block;} .fader-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;} --></style> <div id="fader"> <ul> <li> <img src="http://files.jb51.net/upload/201010/20101011221229942.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229942.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (3)_javascript 기술"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011221229755.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229755.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (3)_javascript 기술"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011221229501.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229501.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (3)_javascript 기술"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011221229435.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229435.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (3)_javascript 기술"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011221229577.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229577.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (3)_javascript 기술"> </li> </ul> </div>
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

컨트롤러의 현재 스타일이 누락된 것을 발견하셨나요? 그래서 init()
this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'에 두 문장을 추가해야 합니다. //pos( ) pos()의 해당
에 할당합니다.
for(var x=0;xnav_wp.getElementsByTagName('a')[x ].className = x==i?this.curC:'fader-nav'; //현재 컨트롤러 스타일 바인딩
}
괜찮습니다. 현재 상태 CSS 스타일도 추가됩니다:
.fader-cur-nav {디스플레이:인라인 블록;여백-오른쪽:8px;색상:#fff;패딩:2px 6px;배경:#ff7a00;테두리:1px 솔리드 #fff;글꼴 계열:Tahoma;글꼴 -중량:굵게;글꼴 크기 :12px;cursor:pointer;}

자, 이제 기본적으로 효과를 살펴보겠습니다. <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title> </title> <style type="text/css"><!-- #fader{position:relative;overflow:hidden;height:300px;width:500px} #fader li{position:absolute;left:0;top:0;} ul,li{list-style:none;margin:0;padding:0} img{display:block;} .fader-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;} .fader-cur-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;} --></style>2단계 <div id="fader"> <ul> <li> <img src="http://files.jb51.net/upload/201010/20101011221229942.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229942.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (3)_javascript 기술"> </li> <li><img src="http://files.jb51.net/upload/201010/20101011221229755.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229755.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (3)_javascript 기술"></li> <li><img src="http://files.jb51.net/upload/201010/20101011221229501.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229501.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (3)_javascript 기술"></li> <li><img src="http://files.jb51.net/upload/201010/20101011221229435.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229435.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (3)_javascript 기술"></li> <li><img src="http://files.jb51.net/upload/201010/20101011221229577.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011221229577.jpg" alt="이미지 주석을 사용하여 페이드인 및 페이드아웃 플러그인을 작성하는 방법을 단계별로 가르칩니다. (3)_javascript 기술"></li> </ul> </div>

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]
글쎄, 사실 대부분의 경우 위의 효과로 충분하지만 일부 친구는 더 많은 요구 사항이 있어 하단에 그림 노트 레이어를 추가하고 싶어합니다. 이 기능은 다음 부분에서 구현됩니다!