팀에서는 갑자기 회전 목마 이미지를 구현하는 방법을 물었습니다. 나는 1 년 이상 프론트 엔드 필드에 있었지만 오랫동안 직접 글을 쓰지 않았습니다. 나는 항상 플러그인을 사용하여 Daniu에 작성했습니다. 오늘 저는 초보자가 배울 수있는 간단한 튜토리얼을 작성하겠습니다. 물론 회전식 다이어그램의 많은 구현 원리와 설계 패턴이 있습니다. 내가 여기서 이야기하고있는 것은 프로세스 지향 기능 프로그래밍을 사용하여 구현하는 것입니다. 객체 지향 설계 패턴과 비교하여 코드는 필연적으로 부풀어 오르고 중복됩니다. 그러나 객체 지향 추상화의 부족은 초보자가 이해하고 배우는 데 매우 적합합니다. 배트에 이미있는 학생들은 덜 분출하기를 희망합니다. 더 많은 제안을 할 수도 있습니다.
회전 목마 다이어그램의 원리 :
CSS 레이아웃을 사용하여 동일한 크기의 일련의 사진이 하나만 표시되고 나머지는 숨겨져 있습니다. 타이머를 사용하여 오프셋을 계산하거나 이벤트를 수동으로 클릭하여 사진을 전환하여 자동 재생이 이루어집니다.
HTML 레이아웃
먼저, 부모 컨테이너 컨테이너는 모든 내용을 저장하고 자식 컨테이너 목록에는 사진이 포함되어 있습니다. 하위 컨테이너 버튼 저장 버튼 점.
<div id = "컨테이너"> <div id = "list"style = "왼쪽 : -600px;"> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> <img src = "img/2.jpg"/> <img src = "img"/> <img src = "img" /> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> </div> <div id = "버튼"> <span index = "1"> </span> <span index = "2"> <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javaScript :;" id = "prev"> <</a> <a href = "javaScript :;" id = "next">> </a> </div>
최적화, 원활한 스크롤.
마지막 이미지에서 첫 번째 이미지로 전환하면 큰 간격이 있으며 두 개의 보조 이미지를 사용 하여이 간격을 메 웁니다.
다음은 원활한 스크롤이 있습니다. 코드를 직접보고 마지막 그림을 배치하기 전에 마지막 그림을 복사 한 다음 마지막 그림 뒤에 첫 번째 그림을 복사하십시오. 그리고 첫 번째 그림 보조 이미지를 숨기십시오 (실제로 다섯 번째 그림은 실제로 표시되므로 set style = "왼쪽 : -600px;")
CSS 수정
1. 상자 모델, 문서 흐름 및 절대 포지셔닝 문제 이해.
2. 오버플로에주의를 기울이십시오 : 목록의 숨겨진; 창의 그림 만 표시하고 왼쪽과 오른쪽을 숨 깁니다.
3. 버튼의 각 스팬 레이어가 얹어지고 최상위로 설정하십시오. (Z-index : 999)
* {마진 : 0; 패딩 : 0; 텍스트-경작 : 없음;} body {padding : 20px;}#컨테이너 {width : 600px; 높이 : 400px; 경계 : 3px Solid#333; 오버플로 : 숨겨진; 위치 : 상대적인; {너비 : 600px; 높이 : 400px; 플로트 : 왼쪽;}#버튼 {위치 : 절대; 높이 : 10px; 너비 : 100px; z-index : 2; 하단 : 20px; 왼쪽 : 250px;}#버튼 스팬 {cursor : pointer; float : 왼쪽; 테두리 : 1px 단단한 #fff; 10px; 10px; #333; 마진-오른쪽 : 5px;} #버튼 .ON {배경 : orangered;}. 화살표 {cursor : 포인터; 디스플레이 : 없음; 선-리이트; 텍스트-정렬 : 중심; 글꼴 크기 : 36px; font-weight : bold; width : 40px; 40px; rgba (0, 0, 0, .3); 색상 : #fff;}. 화살표 : 호버 {배경 색 : rgba (0, 0, 0, .7);}#컨테이너 : hover. arrow {display : block;}#prev {왼쪽 : 20px;}#왼쪽 {오른쪽 : 20px;}JS
먼저, 먼저 왼쪽 및 오른쪽 화살표를 수동으로 클릭하여 그림을 전환하는 효과를 깨달았습니다.
window.onload = function () {var list = document.getElementById ( 'list'); var prev = document.getElementById ( 'prev'); var next = document.getElementById ( 'next'); function Animate (오프셋) {// 왼쪽에 상대적으로 얻을 수있는 거리 인 style, style. parseint ()로 반올림하여 숫자로 변환합니다. var newleft = parseint (list.style.left) + 오프셋; list.style.left = newleft + 'px';} prev.onclick = function () {animate (600);} next.onclick = function () {animate (-600);}}달리면 오른쪽 화살표를 계속 클릭하면 공란이 있고 첫 번째 사진으로 돌아갈 수 없습니다. 왼쪽 화살표를 클릭하여 첫 번째 이미지로 돌아갑니다.
Google Chrome F12를 사용하면 왼쪽 오프셋을 사용하여 그림을 얻기 때문입니다. 왼쪽 값이 3600보다 작다는 것을 알면 8 번째 사진이없는 경우 공란이 있으므로 여기에서 오프셋에 대한 판단을해야합니다.
이 단락을 애니메이션 기능에 추가하십시오.
if (newLeft <-3000) {list.style.left = -600 + 'px';} if (newLeft> -600) {list.style.left = -3000 + 'px';}알았어, 실행, 문제 없어. 이름에서 알 수 있듯이 회전 목마 그림은 움직일 수있는 그림입니다. 현재 브라우저의 내장 객체 타이머를 사용해야합니다.
타이머의 경우 SetInterval ()과 Settimeout의 차이를 설명해야합니다. 간단히 말해서 SetInterval ()은 여러 번 실행되며 Settimeout ()는 한 번만 실행됩니다.
보다 구체적인 사용을 보려면 링크를 클릭하여 차이를 볼 수 있습니다. Window.SetInterVal Window.setTimeout.
여기서는 이미지가 스크롤 된 루프 여야하므로 setinterval ()을 사용합니다. 아래에 삽입하십시오
var timer; function play () {timer = setInterval (function () {prev.onclick ()}, 1500)} play ();실행, 알았어!
그러나 특정 이미지를주의 깊게 살펴 보려면 이미지를 중지해야하며 타이머를 지울 수 있습니다. 이 방법은 여기에서 사용됩니다.
여기서 우리는 DOM에서 작동해야하며 전체 회전식지도 영역을 얻어야합니다.
var container = document.getElementById ( 'container'); function stop () {clearInterVal (타이머);} container.onmouseOver = stop; container.onmouseout = play;그러나 여기에서 회전 목마 사진이 기본적으로 완성되었으며 일부 학생들은 물어볼 것이므로 매우 간단합니다. 그림 아래에 작은 점의 줄을 보셨습니까? 나는 당신에게 기능을 추가했습니다.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
업그레이드 된 버전은 다음과 같습니다.
var buttons = document.getElementById ( 'buttons'). getElementsByTagName ( 'span'); var index = 1; function buttonsshow () {// 이전 스타일은 (var i = 0; i <buttons.length; i ++) {if (buttons [i] .className == ') 배열은 0에서 시작하여 -1buttons [index -1] .classname = 'on';} prev.onclick = function () {index -= 1; if (index <1) {index = 5;} 버튼 ();} 다음 (600);} next.onclick = function () {// 인덱스의 영향으로 인해 계속 될 것입니다. 우리는 5 개의 작은 점만이 있으므로 판단 색인 += 1; if (index> 5) {index = 1;} buttonsshow (); 애니메이션 (-600);}를 만들어야합니다.지금은 훨씬 더 정상적인 것처럼 보이지만 마우스와 함께 언제든지 작은 점 중 하나를 클릭하고 해당 그림으로 전환하려고합니다. 같은 원칙은 여전히 오프셋을 통해 해당 사진을 찾아야한다는 것입니다.
for (var i = 0; i <buttons.length; i ++) {buttons [i] .onclick = function () {// 최적화, 현재 이미지의 현재 점을 클릭하고 다음 코드를 실행하지 마십시오. if (this.className == "on") {return;}/* 오프셋 get : 여기서 마우스가 점으로 이동하는 위치를 가져옵니다. 이것을 사용하여 색인을 객체 버튼으로 바인딩하는 데 사용합니다. parseint (this.getAttribute ( 'index')); var Offset = 600 * (clickIndex -index); 애니메이션 (오프셋); // 마우스 클릭 후 위치를 저장하고이를 사용하여 점을 일반 색인 = clickIndex; buttonsshow ()로 표시합니다.모두, 당신은이 회전 목마 그림이 약간 이상하고 예측할 수 없다는 것을 알게되었을 것입니다. 왼쪽으로 전환하므로 다시 작성하십시오.
function play () {// 캐로 셀 이미지를 오른쪽 타이머로 전환하기 위해 이미지를 전환합니다. 0; Text-Decoration : none;} body {padding : 20px;}#컨테이너 {너비 : 600px; 높이 : 400px; 경계 : 3px solid#333; 오버플로 : 숨겨진; 위치 : 상대}#list {width : 4200px; 600px; 높이 : 400px; float : 왼쪽;}#버튼 {위치 : 절대; 높이 : 10px; 너비 : 100px; Z-index : 2; 하단 : 20px; 왼쪽 : 250px;}#버튼 {커서; 왼쪽; 왼쪽; 왼쪽; 1px 솔리드 #fff; 10px; #333; 마진-오른쪽 : 5px;} #버튼 .ON {배경 : orangered;}. 화살표 {cursor : 포인터; 디스플레이 : 없음; 선-리이트; 텍스트-정렬 : 중심; 글꼴 크기 : 36px; font-weight : bold; width : 40px; 40px; rgba (0, 0, 0, .3); 색상 : #fff;}. 화살표 : 호버 {배경 색상 : rgba (0, 0, 0, .7);}#컨테이너 : hover. arrow {display : block;}#prev {left : 20px;}#next : 20px;} <script point =*/* 이 사용법*//*dom event*//*timer*/wind document.getElementById ( 'next'); var index = 1; var 타이머; 함수 애니메이션 (오프셋) {// 획득되는 것은 Style.Left입니다. 왼쪽에 비해 얻을 수있는 거리입니다. 따라서 첫 번째 그림은 모두 음수입니다. var newLeft = parseint (list.style.left) + 오프셋; list.style.left = newleft + 'px'; // 무한 스크롤 판단 if (newLeft> -600) {list.style.left = -3000 + 'px';} if (newleft <-3000) {list.style.left = -600 + 'fortply (}}}} {// 반복 실행 타이머 = setInterval (function () {next.onclick ();}, 2000)} 함수 stop () {clearInterVal (timer);} 함수 buttonsshow () {// (var i = 0; i <buttons.length; i ++)의 이전 작은 점의 스타일을 지우십시오. {buttons [i] .className = "";}} // 배열은 0에서 시작되므로 인덱스는 -1buttons [index -1] .className = "on";} prev.onclick = function () {index -= 1; if (index <1) {index = 5} buttonsshow (600); infort. 위의 타이머 중 색인이 계속 증가합니다. 우리는 5 개의 작은 점만이 있으므로 판단 색인+= 1; if (index> 5) {index = 1} 애니메이션 (-600); buttonsshow ();}; for (var i = 0; i <buttons.length; i ++) {buttons [i] .onclick = function () {//옵니다. 현재 이미지에서 현재 작은 닷을 클릭하십시오. if (this.className == "on") {return;}/* 여기서 마우스가 점으로 이동하는 위치를 얻습니다. 이것을 사용하여 색인을 객체 버튼에 바인딩하는 데 사용합니다. parseint (this.getAttribute ( 'index')); var Offset = 600 * (clickIndex -index); //이 색인은 indexanimate (오프셋)입니다. index = clickIndex; // 마우스를 클릭 한 후 위치를 저장하고 DotSshow ();}} 컨테이너를 표시하는 데 사용하여 사용합니다. src = "img/1.jpg"/> <img src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "Img/5. JPG"/>>>>>>>>>>>>>> 5. JPG src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img src = "img/4.jpg"/> <img src = "img/5.jpg"/> <img src = "img/1.jpg"/> </div> <div id = "span"> </span " index = "2"> </span> <span index = "3"> </span> <span index = "4"> </span> <span index = "5"> </div> <a href = "javaScript :;" id = "prev"> </a> <a href = "javaScript :;" id = "next">> </a> </div> </body> </html>위는 편집자가 소개 한 간단한 JS 회전 목마 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!