계층 구조를 변경하는 회전식 그래프 알고리즘을 공유했습니다. 오늘날 나는 변위가없는 회전 목마 그래프 알고리즘을 달성하기 위해 투명성을 계속 사용하고 있습니다.
구현 로직 : 모든 그림을 함께 캐 러셀로 배치하고, 즉 레이어로 레이어를 쌓은 다음, 계층 적 속성을 사용하여 올바른 그림 순서를 조정하고, 그림의 투명성을 0으로 설정 한 다음, 첫 번째 그림의 투명성을 1로 만듭니다. 특정 알고리즘은 다음과 같습니다.
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> 투명도 알고리즘 변경 (클래식) </title> <style media = "screen"> * {margin : 0; 패딩 : 0; } .wrap {너비 : 60%; 마진 : 자동; 위치 : 상대; }. 트랩 img {너비 : 100%; 위치 : 절대; 왼쪽 : 0; 상단 : 0; 전환 : 2s; } .wrap img : nth-Child (1) {위치 : 상대; } .wrap .follow {너비 : 150px; 높이 : 30px; 마진 : 자동; 디스플레이 : Flex; 정당화 컨텐츠 : 공간 중간; } .wrap .follow span {너비 : 10px; 높이 : 10px; 국경-라디우스 : 50%; 테두리 : 3px 단단한 회색; } .wrap .follow span : hover {cursor : 포인터; . value = ">"> <input id = "rightbut"type = "button"name = "name"value = "▶ ︎"> <div> <span> </span> <span> </span> <span> </span> </span> <span> </span> <span> </span> </div> </body> <cript type = "text/javascription"> // document.querySelectorALL ( '. 랩 img'); var spans = document.querySelectorall ( '. Span'); var leftbut = document.getElementById ( 'leftbut'); var rightbut = document.getElementById ( 'rightbut'); // 매개 변수 함수 showImage (index) {for (var i = 0; i <images.length; i ++) {spans [i] .index = i; 사용자 정의 속성, 해당 첨자 이미지를 가져옵니다 [i] .index = i; 사용자 정의 속성, 해당 첨자 이미지를 가져옵니다. '0'; // 모든 이미지 투명성을 0 스팬에 할당 [i] .Style.background = 'Grey'; // 모든 점 베이징 색상이 검은 색으로 설정됩니다} // 들어오는 매개 변수 첨자 값의 이미지 투명성을 1 이미지 [index] .Style.opacity = '1'에 할당합니다. // 들어오는 매개 변수로 그림의 배경색을 흰색 스팬에 첨가 한 값으로 지정합니다. } showImage (0); // 초기에 들어오는 매개 변수 첨자 값으로 그림 스타일을 0 var count = 1으로 설정하십시오. if (count % 4 == 0) {count = 0; } // count 값을 매개 변수로 전달 showImage (); showimage (count); count ++; // 한 번 +1} // execute imageMove ()를 2 초마다 한 번 호출하여 imageInitialMove var imageInitialMove = setInterVal ( 'imageMove ()', 2000)에 할당합니다. // leftbut.onclick = function () {// 타이머 clearinterval (imageInitialMove)을 클릭합니다. // 방향이 자동 휠과 반대이므로 카운트 값이 0임을 판단하고 4로 재 할당하고 (count == 0) {count = 4; } count-; showImage (count); // 기능 count를 -ImageInitialMove에서 먼저 호출 = setInterVal ( 'imageMove ()', 2000); } // Right-to-RightBut.onClick = function () {clearInterVal (imageInitialMove); imageMove (); // 방향은 자동 회전식과 동일하기 때문에 직접 호출 // 타이머 imageInitialMove = setInterVal ( 'imageMove ()', 2000); } // (var i = 0; i <spans.length; i ++) {spans [i] .onclick = function () {clearInterval (imageInitialMove); // 현재 클릭 한 점의 첨자 값을 count = event.target.index에 count에 할당합니다. // 함수 showImage (count)를 호출합니다. imageInitialMove = setInterVal ( 'imageMove ()', 2000); }} </script> </html>멋진 주제 공유 : jQuery 사진 회전 목마 JavaScript 사진 회전 목마 부트 스트랩 사진 회전 목마
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.