주석을 사용하여 페이드인 및 페이드아웃 그림 회전판 플러그인을 작성하는 방법을 단계별로 가르쳐줍니다. (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()로 돌아갈 수 있습니다.
그런 다음 완전하고 실행 가능한 논리 시스템을 구축했습니다. 위의 로직을 바탕으로 코드구조를 이용하여 다음과 같이 표현합니다.