효과 도표는 다음과 같습니다.
애니메이션 효과 소개: 이 광고 세트의 효과는 페이지를 연 후 사진이 자동으로 재생된다는 것입니다. 총 5장의 사진 1~5 중 표준에 속한다면 오른쪽 하단의 1, 2, 3, 4, 5 목록으로 이동하시면 보고 싶은 사진으로 자유롭게 전환하실 수 있습니다. 그림 전환은 아래에서 위로 이루어집니다.
제작 아이디어: 먼저 이 5장의 사진을 ul의 5개 목록에 넣고
《1》전체 사진 수를 찾으면 1.2.3.4를 클릭합니다. 5, 해당 번호가 전달되고 해당 사진이 표시됩니다.
《2》속성 마크가 배치되면 애니메이션을 중지합니다(clearIntval() 사용 가능). 속성 마크가 이동되면 setIntval(function, time)을 사용하여 3000밀리초마다 이 함수를 실행할 수 있습니다.
《3》이 애니메이션 기능을 완료합니다. 이 함수에서는 먼저 이 애니메이션 영역(.slider)의 높이를 얻을 수 있습니다. 그런 다음 애니메이션 사용자 정의 애니메이션 기능을 사용하여 TOP 위치를 변경합니다. 그리고 현재 li의 숫자에 강조 효과를 추가합니다.
《4》한 가지 더, TOP 변경을 정상적으로 수행하려면 현재 영역의 상위 태그(.ad)에 "position:relative;"를 설정해야 합니다. 그러면 모든 것이 정상입니다. 제작 코드는 다음과 같습니다.
1》html 구조는 다음과 같습니다.