H5를 사용하여 터치 스크린 로터의 예를 구현하는 방법

프론트 엔드의 시작 부분에서는 일반적인 기능이 다음과 같습니다.

1. 지원 사이클 슬라이딩

2. 너비는 임의로 설정할 수 있으며 화면에서 너비가 필요하지 않습니다.

3. 페이지는 수직으로 굴릴 수 있습니다

4. 복구 모니터링 요소의 스위칭을 설정할 수 있습니다.

5. Pure JS, 제 3 자 도서관을 사용하지 마십시오.

1. 하위 요소의 너비가 375px라고 가정하고 절대 포지셔닝을 사용하여 모든 하위 요소를 부모 요소에 배치합니다.

2. 부모 요소의 너비를 375px로 설정합니다. 이는 하위 요소와 동일합니다.

3. 부모 요소에 터치 이벤트 추가 .carousel : TouchStart, Touchmove, Touchend

4. 손가락을 누르면 초기 위치를 저장 (clientx)

5. 손가락을 미끄러지는 경우 슬라이딩 거리에 의해 미끄러지는 방향을 판단하십시오.

① 손가락을 왼쪽으로 밀고 현재 요소와 현재 요소의 오른쪽에 요소를 동시에 움직입니다.

② 손가락을 오른쪽으로 스 와이프하고 현재 및 현재 요소의 왼쪽에있는 요소를 동시에 움직입니다.

6. 손가락이 들어 올리면 슬라이딩 거리를 통해 다음 페이지로 전환할지 여부를 결정하십시오.

이동 거리는 하위 요소 폭의 50%를 초과하지 않으며 현재 요소를 전환하지 않고 현재 페이지를 초기 위치로 롤백합니다.

② 이동 거리는 하위 요소의 폭의 50%를 초과하고 현재 요소는 다음 요소로 전환됩니다.

③ 전류 요소의 변환 속성을 Translate3d (0px, 0px, 0px)로 설정하고

④ 다음 하위 요소의 변환 속성을 Translate3d (375px, 0px, 0px)로 설정합니다.

⑤ 이전 하위 요소의 변환 속성을 Translate3d (-375px, 0px, 0px) 및 z-index 속성 +1로 설정합니다.

⑥ 기타 모든 하위 요소의 z-index 속성을 기본값으로 설정

7. 첫 번째 자식 요소의 첫 번째 요소는 마지막 요소이며, 마지막 요소의 다음 요소는 첫 번째 요소이며,이 요소는 원형 링크 된 목록에 의해 구현됩니다.

움직일 때, 자식 요소의 변환 속성을 설정하십시오.

HTML & CSS

 // html <div class = carousel ontouchstart => <div class = 배경 : #3B76C0> </h3> </div> </div> <div class = itemle = backgr ound : #58c03b ;> <h3> 항목- 2em -4 </h3> </div> <div class = 항목 스타일 = 배경 : #c03eac;> <h3> 항목 -5 </h3> </div> </div>

 //crs.

JS

초기 상태를 설정하십시오

먼저 회전 구성 요소의 요소를 유지하기 위해 두 개의 웨이 링크 목록을 실현하십시오.

 기능 노드 (data) {this.prev = null; index = -1; head = null; this.last = null (type this.append! == function) {if (this.head == null) is.head = node; this.head; node .index = _nodes.length; // node.index_nodes.push (node);}}을 설정하십시오.

링크 된 목록을 사용하면 링크 된 예제를 작성하고 링크 된 목록에 하위 요소를 추가하고 초기 상태를 설정하십시오.

 var _container = querctorll (. + aiterclass); i ++) {list.Append (_ITEMS [i]);} var _prev = null; zar _activezindex + 1; 추가 할 요소 1

손가락을 누르면 초기 위치를 저장하십시오

 _container.addeventListener (t 손가락 strict = false;

화면에서 손가락을 밀고 손가락을 페이지에서 움직입니다.

 _container.addeventListener (TouchMove, function (e) {// e.preventDefault (); //이 줄 코드의 주석은 요소의 페이지가 수직으로 롤링되는 것을 방지합니다. uch .clientx -startx; // X 방향으로 미끄러짐 var deltay = touch.clienty -Starty; 왼쪽과 오른쪽으로 슬라이딩 if (math.abs (deltax)> math.abs (deltay) {translate = deltax> _itemwidth? _itemwidth : deltax; translate = deltax <-_ itemwidth : delta x; // 현재 요소를 움직입니다. 왼쪽 및 오른쪽 요소는 동시에 움직입니다 (번역);

손가락이 화면을 떠나면 계산은 결국 어느 페이지에 남아 있습니다.

 _container.addeventListener (touchend, function (e) {// e.preventDefault (); //이 라인의 코드가 취소되면 페이지의 수직 스크롤이 요소의 수직 스크롤을 방지합니다. deltat = new date () -Startt (ismove) {// 숙박 시간이 300ms 미만인 경우 슬라이딩 거리가 얼마나 많은지 상관없이 빠르게 미끄러 져 나옵니다. 거리는 슬라이딩 거리 사이의 거리가 얼마입니까? 화면의 50%보다 이전 페이지로 돌아가는 if (math.abs (translate)/_itemwidth <0.5) {isrollback = true;} else {// 슬라이딩 거리는 화면보다 50%더 크면 다음 페이지 번역 <0?

사용을 용이하게하기 위해 전체 구현 프로세스를 라이브러리에 캡슐화하고 이전 (), Next () 메소드를 추가했습니다.

 <script src = lib/carousel.js> </script> CreateCarousel (carousel, it, true) .BindTouchEvent () .SetItemChangedHandler (onpagechanged); // 세 번째 매개 변수 설정을 Cycle에 의해 재생 해야하는지 여부, True는 Cycle에 의해 재생됩니다.

위는이 기사의 모든 내용입니다.