주석을 사용하여 페이드인 및 페이드아웃 그림 회전판 플러그인을 작성하는 방법을 단계별로 가르쳐줍니다. (1)_javascript 기술

며칠 전 blueIdea http://bbs.blueidea.com/thread-2911266-1-1.html에서 페이드인 및 페이드아웃 주석이 달린 그림 캐러셀 효과를 보았습니다. 효과는 얻었지만 의견이 다른 곳도 몇 군데 있습니다.

1. 작성자의 생각은 실제 이미지 목록을 숨기고 새 div를 만들고 현재를 계속 푸시하는 것입니다. 해당 div의 innerHTML에 이미지를 하나씩 추가해 보겠습니다. 아이디어는 다소 새로운 것이지만 대상 효과의 연산 논리 관점에서 보면 목록 요소의 z-index 값을 변경하여 교대 변환하는 것이 실제로는 이 효과 논리의 원래 의도에 더 가깝습니다.

2. 작성자가 코드를 어느 정도 캡슐화했지만 여전히 캡슐화 상태가 좋지 않고 효과도 잘 구성되지 않습니다. 따라서 이는 하나의 효과일 뿐일 수 없습니다. 구성 가능한 플러그인.

(ps: 위의 의견은 순전히 해당 사안에 근거한 것이며, 글쓴이의 실력에 대해서는 의심의 여지가 없습니다. 사람마다 의견이 다릅니다. 순전히 개인적인 의견입니다.)

그러므로, 저도 시간을 들여 직접 작성해봤습니다. 비슷한 효과가 있고 어느 정도 캡슐화되어 있어서 가벼운 네이티브 플러그인이라고 볼 수 있지만 그래도 공유하고 단계별 튜토리얼을 제공합니다. , 도움이 필요한 친구들에게 도움을 주고 싶습니다. 먼저 최종 렌더링을 살펴보겠습니다.

자, 가자! 첫 번째 부분을 시작하겠습니다!
첫 번째 부분에서 달성하고 싶은 목표는 다음과 같습니다.
1. 변환 로직을 구현하기 위한 대규모 프레임워크를 구축하고, 향후 기능 확장을 위한 견고한 기반을 마련하기 위한 좋은 코드 구조를 구축합니다. (좋은 시작이 절반의 전투입니다!)
2. 첫 번째 부분에서 얻을 수 있는 효과는 사진 자동 전환입니다(이 기능만 해당).
먼저 이 효과를 얻으려면 초기화 함수 init()-->init()를 호출하여 첫 ​​번째 그림을 다음 그림으로 변환해야 합니다. 이 함수를 잠정적으로 결정합니다. 함수는 pos()입니다. --> 자동 교번 변환을 구현하려면 자동 변환 함수가 반드시 필요합니다. function auto() --> auto()의 자동 변환에는 순방향과 방향의 두 방향이 있어야 합니다. 이 함수를 함수를 통해 구현할 수도 있습니다. 잠정적으로 move()-->move()는 위쪽 또는 아래쪽 변환을 지정하고 변환 함수 pos()로 돌아갈 수 있습니다.
그런 다음 완전하고 실행 가능한 논리 시스템을 구축했습니다. 위의 로직을 바탕으로 코드구조를 이용하여 다음과 같이 표현합니다.

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

var Hongru={};
Hongru.fader = function(){
return{
init:function(options){ //옵션 매개변수: id(필수): 사진 목록 상위 태그 ID; 자동(선택 사항): 자동 실행 시간; 인덱스(선택 사항): 실행을 시작한 이미지의 일련번호
this.pos(this.index) //변환 함수
}
auto:function() {
setInterval(new Function('Hongru.fader.move(1)'), this.a*1000)
},
move:function(i) {//매개변수에는 1과 -1의 두 가지 유형이 있습니다. 1은 다음 그림으로 실행을 의미하고, -1은 이전 그림으로 실행을 의미합니다.
this.pos(m) //이전 그림으로 변환 또는 다음 그림
},
pos:function(i){
this.auto() //자동 실행
}
}
}(); >
위 내용은 저뿐입니다. 좋은 코딩 습관: 이름 충돌을 줄이고 전역 변수 오염을 피하기 위해 모든 함수 블록을 클로저에 작성하세요. (그러나 여기에는 문제가 있습니다. 모든 함수가 클로저에 있으므로 IE 메모리 누수가 발생할 수 있으므로 또 다른 더 좋은 방법이 있습니다. 클로저에 초기화 함수만 작성하고 다른 함수는 프로토타입을 통해 내장됩니다. 또한 이름 충돌과 전역 변수 오염을 방지하는 동시에 메모리 부담을 줄입니다. 이 최적화 계획은 다음 섹션에서 설명합니다.
자, 이제 큰 프레임워크가 나왔으니 실제로 절반만 성공하겠습니다. 아래 단계는 각 모듈의 특정 기능을 강화합니다. DOM 선택자는 가장 일반적으로 사용되는 기능이므로 여기에 두 개의 전역 기능이 미리 정의되어 있습니다.

코드 복사 코드는 다음과 같습니다. 함수 H$(id){return document.getElementById(id)}

함수 H$$(c,p){return p.getElementsByTagName(c)}

모두가 이해하리라 믿습니다.
다음은 각 모듈 함수의 분해입니다.

init 모듈:

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

init:function(options){ //옵션 매개변수: id(필수): 사진 목록 상위 태그 id; auto(선택): 자동 실행 시간(선택): 실행 시작 이미지 시리즈 number
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; //실행을 시작할 사진의 일련번호(0부터 시작)
this.l = li.length
this.cur = this.z = 0; 현재 표시된 사진 번호&&z-index 변수
this.pos(this.index); //변환 함수
},

auto:

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

auto:function(){
this.li.a = setInterval(new Function('Hongru.fader.move(1)) '),this.a*1000)
},

move:

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

move:function(i){//매개변수 i, 1 및 -1에는 두 가지 옵션이 있습니다. , 1은 다음 항목으로 실행을 의미하고, -1은 이전 항목으로 실행을 의미합니다. Zhang
var n = this.cur i
var m = i==1?n==this.l?0:n :nthis.pos(m) //다음으로 변환합니다. 이전 또는 다음 사진
},

pos:

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

pos:function(i){
clearInterval(this.li.a)
this.z
this.li[i].style.zIndex; = this.z; //다음 사진의 z-index를 1씩 늘립니다.
this.cur = i; //현재 표시된 이미지의 올바른 일련번호를 바인딩합니다.
this.auto(); //자동 실행
}

자, 전체 소스 코드는 다음과 같습니다.

<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>1단계</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;} --></style> <div id="fader"> <ul> <li> <img src="http://files.jb51.net/upload/201010/20101011212559828.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011212559417.jpg" alt="주석을 사용하여 페이드인 및 페이드아웃 그림 회전판 플러그인을 작성하는 방법을 단계별로 가르쳐줍니다. (1)_javascript 기술"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011212559387.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011212559687.jpg" alt="주석을 사용하여 페이드인 및 페이드아웃 그림 회전판 플러그인을 작성하는 방법을 단계별로 가르쳐줍니다. (1)_javascript 기술"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011212559942.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011212559977.jpg" alt="주석을 사용하여 페이드인 및 페이드아웃 그림 회전판 플러그인을 작성하는 방법을 단계별로 가르쳐줍니다. (1)_javascript 기술"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011212559739.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011212559862.jpg" alt="주석을 사용하여 페이드인 및 페이드아웃 그림 회전판 플러그인을 작성하는 방법을 단계별로 가르쳐줍니다. (1)_javascript 기술"> </li> <li> <img src="http://files.jb51.net/upload/201010/20101011212559310.jpg" _mce_src="http://files.jb51.net/upload/201010/20101011212559726.jpg" alt="주석을 사용하여 페이드인 및 페이드아웃 그림 회전판 플러그인을 작성하는 방법을 단계별로 가르쳐줍니다. (1)_javascript 기술"> </li> </ul> </div>
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
] 음, 이번 부분은 끝입니다. 다음 부분에서는 페이드 인 및 페이드 아웃 효과를 추가하고 클로저로 인한 메모리 누수를 방지하기 위해 방금 언급한 최적화 계획을 추가할 것입니다!