1. 구현 원리
(1) 모든 그림을 모 컨테이너 디바이에 놓고 디스플레이 속성을 통해 그림의 모양과 숨겨지는 것을 설정하십시오.
(2) 회전식 다이어그램은 수동 회전 목마 및 자동 회전 목마로 나뉩니다.
수동 회전 목마의 초점은 사진을 클릭 할 때마다 그림 아래의 작은 원을 클릭하고 인덱스 번호를 가져오고 해당 색인 번호가있는 그림을 표시 하고이 시점의 작은 원이 강조 표시되는 것입니다.
자동 회전식 : 타이머 setInterval ()을 사용하여 매번 그림을 재생하십시오.
(3) 모든 기본 지식 : DOM 작동, 타이머, 이벤트 응용 프로그램.
2. 회전 목마 그림 페이지 레이아웃 :
<div id = "content"> <!-총 상위 컨테이너-> <div> <!-사진 포함 컨테이너-> <div> <img src = "./ img/lunbo1.jpg"> </div> <div> <img src = "./ img/lunbo2.jpg"> <img src = "./ img/lunbo3.jpg"> </div> <!-그림 아래의 표시 원-> <ul> <li id = 'pic1'> ● </li> <li id = 'pic2'> ● </li> </ul> <!-그림의 왼쪽과 오른쪽 화살을 뒤로 스크롤합니다. href = "#"> <span >> </span> </a> </div>
3. CSS 스타일의 회전 목마 다이어그램 :
#content {너비 : 100%; 높이 : 500px; 위치 : 상대;}. 회전식;}. 회전식 {위치 : 상대; 너비 : 100%; 오버플로; 높이 : 500px; } .carousel-inner> .item> img {display : block; 선-높이 : 1; z-index : 1;}. 회전식 인디네이터 {위치 : 절대; 하단 : 10px; 왼쪽 : 45%; Z-index : 2; 목록 스타일 유형 : None;}. Carousel-Indicators Li {디스플레이; 패딩 : 0 15px; font-size : 24px :#999; 커서 : 포인터; z-index : 2;}. Active1 {font-size : 28px; color : #fff;}. 회전식 제어 {위치 : 절대; 텍스트-결정 : 없음; 색상 : #999; font-weight : bold; 불투명도 : .5; font-size; z-index : 3;}. 회전 목마 제어 : 호버 {색상 : fff; 텍스트-장식 : 없음; 불투명도 : .9; 개요 : 없음; font-size : 42px;}. prev {top : 30%; 왼쪽 : 20px; } .next {top : 30%; 오른쪽 : 20px;}4. 회전 목마 다이어그램에 대한 JS 구현 코드 :
window.onload = function () {// 회전식 초기화 var lunbo = document.getElementById ( 'content'); var imgs = lunbo.getElementsByTagName ( 'IMG'); var uls = lunbo.getElementsByTagName ( 'ul'); var lis = lunbo.getElementsByTagName ( 'li'); // 원은 하이라이트 모드에 있습니다 [0] .style.fontsize = '26px'; lis [0] .Style.color = '#fff'; // pic_index = 1; // 자동 회전 목마. pic_time을 사용하여 재생을 기록하면 ClearinterVal ()을 사용하여 언제든지 지울 수 있습니다. var pic_time = setInterval (autobofang, 3000); // 수동 회전 목마 (var i = 0; i <lis.length; i ++) {lis [i] .addeventListener ( "MouseOver", Change, False);} 함수 변경 (var event = event || window.event; var target = event.targget.srcell; var children = target.parentnode.children; for (var i = 0; i <children.length; i ++) {if (target == children [i]) {picchange (i); }}} // 그림 전환 함수 기능 picchange (i) {// 모든 그림이 표시되지 않도록하고 모든 원은 (var j = 0; j <imgs.length; j ++) {imgs [j] .style.display = 'none'; lis [j] .style.fontsize = '24px'; lis [j] .style.color = '#999';} // 선택한 인덱스 이미지를 표시하고 해당 원이 IMGS로 강조 표시됩니다 [i] .Style.display = 'block'; lis [i] .style.fontsize = '26px'; lis [i] .style.color = '#fff'; } // AutoPlay 이벤트 처리 기능 AutoBofang () {if (pic_index> = lis.length) {pic_index = 0;} change1 (pic_index); pic_index ++;} // 자동 재생 이미지 change1 (index) {picchange (index); uls [0] .addeventListener ( "마우스 오버", 일시 정지, 거짓); // 마우스는 UL 태그를 꺼내고, 자동으로 사진이 계속 연주됩니다. target = event.target || event.srcelement; switch (target.id) {case "pic1": clearinterval (pic_time); break; case "pic2": clearinterval (pic_time); break; case "pic3": clearinterval (pic_time); break;}} // 자동 재생 사진 연속 함수 go (event) {var event || window.event; var target = event.target || event.srcelement; switch (target.id) {case "pic1": pic_index = 1; pic_time = setInterval (Autobofang, 3000); break; case "pic2": pic_index = 2; pic_time = setInterval (Autobofang, 3000); break; case "pic3": pic_index = 3; pic_time = setInterval (Autobofang, 3000); break;}}}5. 생식 사진 :
6. 문제와 단점이 발생했습니다
문제 : 마우스가 처음으로 UL 태그로 이동하면 자동 회전 목마 그림이 멈추고 마우스가 꺼지고 자동 회전 목마가 계속되지만 작동이 진행되면 회전식 사진이 더 빠르고 빠르게 변경 되며이 시간에 UL 태그를 클릭하는 것이 더 이상 작동하지 않습니다.
문제의 원인 : 회전 목마를 중지 한 후 타이머를 다시 사용하면 값이 녹음을 위해 PIC_TIME에 할당되지 않으므로 마우스가 UL 태그로 다시 이동하여 타이머를 지우지 않습니다. 따라서 UL 태그를 다시 클릭하면 자동 회전식 재생이 일시 중지 될 수 없으며 속도가 더 빠르고 빠르게 증가하고 있습니다.
부적합 : 타오 바오 회전 목마 차트와 같은 무질서한 스크롤의 효과는 달성되지 않았으며 왼쪽 및 오른쪽 화살표의 지표 효과가 완료되지 않았습니다. 이것들은 후반 단계에서 계속 배우고 개선하고 공유 할 것입니다.