회전식 다이어그램은 향후 응용 프로그램에서 여전히 비교적 일반적이며 많은 코드 라인없이 구현할 수 있습니다. 그러나 JS의 기본 지식 만 마스터하는 경우 어떻게 더 적고 간단한 논리적 방법을 사용하여이를 달성 할 수 있습니까? 다음은 몇 가지 다른 관행입니다.
1. 변위 방법을 사용하여 달성하십시오
먼저, 우리는 신체에 div를 추가하고 너비를 백분율 (적응 형 페이지)으로 설정할 수 있습니다. 비율이 비율의 비율에 따라 특정한 경우, 우리는 필요에 따라이를 수행합니다. 나는 여기서 많이 말하지 않을 것입니다. 이미지를 Div에 넣습니다.
둘째, 스타일 부분은 모든 IMG 태그를 절대로 설정하여 포지셔닝을 용이하게합니다.
마지막으로 JS 부분은 논리에 대해 이야기하여 두 개의 빈 배열을 정의합니다. 첫 번째 배열은 페이지에 표시된 초기 그림을 저장하고 입력하기를 기다리는 그림을 저장하고 두 번째 어레이는 나머지 N 사진을 저장합니다. 이 두 배열이 다음으로 설정되어 있다고 가정합니다. WaitToshow = []; 그리고 goout = []; WaitToshow.shift (); 첫 번째 이미지의 이름이 showfirst이고 변위 및 이동 시간이 ShowFirst 이미지에 대해 설정된 경우. 실행이 완료되면 Showfirst를 Goout의 꼬리에 넣습니다. Goout.push (showfirst); 현재 Waittoshow 어레이의 0 번째 요소는 표시 할 원래 두 번째 그림이됩니다. 이 그림의 변위 및 이동 시간을 Waittoshow [0]에 설정하고 Goout 어레이의 첫 번째 요소 사진을 팝업하여 Waittoshow 어레이의 꼬리에 넣어 Waittoshow 어레이가 항상 표시되는 그림과 그림이 표시되도록하십시오. 이러한 방식으로, 두 배열은 회전식 사진의 구현을 완료하기 위해 루프를 형성합니다. 역 논리는 동일합니다 (논리가 너무 복잡하기 때문에 여기서 권장되지 않습니다).
2. 계층 구조 수준을 사용하여 상단 그림을 변경하는 방법 (이 방법은 변위 동작이 없지만 논리는 매우 간단하고 실용적입니다).
직접 코드에 직관적입니다. 기본적으로 모든 라인에는 주석이 있습니다.
<! docType html> <html> <head> <메타 charset = "utf-8"> <title> 회전식 다이어그램 (플래시 적응 형) </title> <style media = "screen">* {마진 : 0; 패딩 : 0; 랩 {wrap {wadth : 60%; 배경 : 빨간색 : auto; 위치;}. 절대;/*z-index : 10;*/} 입력 {테두리 : 1px solid lightgray; 너비 : 50px; 높이 : 30px; 배경 : 빨간색; Border-Radius : 5px; font-size : 20px;} </style> </head> <bod> <img src = "Img/01.jpg"/> <img src = "img/01.jp" /> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/> </div> <입력 유형 = "butleft"name = "name"value = "value ="◀︎ "> <input type ="button "id ="butright "value ="초 </</</body> </body> <input 유형. type = "text/javaScript"> // 문자열 배열을 생성하려면 이미지 요소를 가져옵니다. 문자열 배열은 푸시 팝 스플 라이스 또는 기타 작업을 수행 할 수 없으므로 // 값을 배열로 재고해야합니다. 이후 정의 var images = document.getElementsyTagName ( 'IMG'); var butleft = docum 1000; // 이미지에 문자열 요소를 저장하기 위해 빈 배열을 가져옵니다. 그들을. 이미지가 높을수록 레벨 설정이 높을수록 -i는 첫 번째와 두 번째 그림에서 나옵니다. 순서대로 CurrentImage.style.zindex = -i;} // 카운터 카운트를 설정하고 클릭 이벤트 (왼쪽 또는 오른쪽) count + 1var count = 0; // 왼쪽 butleft.onclick = function () {// 팝 컬러의 a grese indem of the the the extres. imagess.shift (); // 팝 된 이미지 요소의 레벨을 설정합니다. 즉 -1000 + count, // 다른 요소와 비교하여 레벨을 가장 작은 레벨로 만들고, 배열의 헤드에 이미지가 showfirst.style.zindex = - 인덱스 + 카운트에 표시됩니다. 1, 특정 값을 고려하지 말고 이벤트+1 count ++;} // 이벤트를 오른쪽으로 클릭하십시오. right wright.onclick = function () {// 이미지의 꼬리에서 요소를 팝업하고 showfirstvar showfirst = imagess.pop ()에 할당; +카운트; // 레벨이 변경된 후 배열 imagess images의 헤드에 삽입하십시오.기본 JS (Click Event Carousel의 간단한 구현)에 대한 위의 필수 기사는 내가 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.