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를 제어하려면 또 다른 코드 줄을 추가해야 합니다. 항상 캐러셀 요소 위에 위치하도록 합니다.
추가된 8개의 문장과 해당 CSS를 통해 컨트롤러의 형태가 갖춰지기 시작했습니다. 컨트롤러 CSS는 이렇습니다
프로토타입 효과를 살펴보겠습니다.
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'에 두 문장을 추가해야 합니다. //pos( ) pos()의 해당
에 할당합니다.