어떻게 H5 로 터치 스크린 판 의 윤 파 기 를 실현 합 니까?

첫 번 째 로 전단 에 들 어가 핸드폰 에 있 는 터치 스크린 플레이어 의 실현 과정 을 공유 하고 대체적으로 다음 과 같은 기능 을 가진다.

순환 슬라이딩 지원

너 비 는 임의로 설정 할 수 있 으 며 화면 과 같은 너비

가 필요 없습니다.

페이지 를 세로 로 스크롤 할 수 있 습 니 다

리 셋 감청 요소 의 전환 설정

순수 js, 그 어떠한 제3자 창고

도 빌 리 지 않 습 니 다.
의 원리

서브 요소 .item 의 width 가 375 px 라 고 가정 하고 절대적 인 포 지 셔 닝 을 사용 하여 모든 서브 요 소 를 부모 요소 에 넣 습 니 다

부모 요소 .carousel 의 width 를 375 px 로 설정 하여 하위 요소 .item 와 너비 가 같 음

부모 요소 .carousel 에 터치 이벤트 추가: touchstart, touchmove, touchend

손가락 을 눌 렀 을 때 초기 위치 저장 clientX

손가락 이 미 끄 러 질 때 미 끄 러 지 는 거 리 를 통 해 미 끄 러 지 는 방향 을 판단 한다.

손가락 이 왼쪽으로 미 끄 러 지면 현재 요소 와 현재 요소 오른쪽 요 소 를 동시에 이동 합 니 다

손가락 이 오른쪽으로 미 끄 러 지면 현재 요소 와 현재 요소 왼쪽 요 소 를 동시에 이동 합 니 다

손가락 을 들 어 올 릴 때 미끄럼 거 리 를 통 해 다음 페이지 로 전환 여 부 를 판단 한다

이동 거 리 는 하위 요소 너비 의 50% 를 초과 하지 않 고 현재 페이지 를 초기 위치 로 스크롤 하여 현재 요 소 를 전환 하지 않 습 니 다.

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

현재 원소 의 transform 속성 을 translate3d(0px, 0px, 0px) 로 설정 하고 z-index 속성 + 1

다음 키 요소 의 transform 속성 을 translate3d(375px, 0px, 0px) 로 설정 하고 z-index 속성 + 1

이전 키 요소 의 transform 속성 을 translate3d(-375px, 0px, 0px) 로 설정 하고 z-index 속성 + 1

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

첫 번 째 키 요소 의 이전 요 소 는 마지막 요소 이 고 마지막 요소 의 다음 요 소 는 첫 번 째 요소 이 며 이 절 차 는 순환 링크 를 통 해 이 루어 진다.

이동 할 때 하위 요소. item 의 transform 속성 을 설정 합 니 다. 부모 요소 .carousel 가 아 닙 니 다.
실현 절차
html&css

//html
  
  
    
    
item-1
  
  
  
  
    
    
item-2
  
  
  
  
    
    
item-3
  
 
  
  
    
item-4
  
  
  
  
    
    
item-5
  
  


//css
.carousel{
  height: 50%;
  position: relative;
  overflow: hidden;
}

.item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

js
초기 상태 설정
먼저 양 방향 링크 를 실현 하여 윤 방 구성 요소 의 요 소 를 유지 하 는 데 사용 합 니 다.

function Node(data) {
    this.data = data;
    this.prev = null;
    this.next = null;
    this.index = -1;
}

//      
function LinkList() {
    var _nodes = [];
    this.head = null;
    this.last = null;

    if (typeof this.append !== "function") {
        LinkList.prototype.append = function (node) {
            if (this.head == null) {
                this.head = node;
                this.last = this.head;
            }
            else {
                this.head.prev = node;
                this.last.next = node;

                node.prev = this.last;
                node.next = this.head;

                this.last = node;
            }

            node.index = _nodes.length; //   push   node.index
            _nodes.push(node);
        }
    }
}

링크 가 있 으 면 링크 인 스 턴 스 를 만 들 고 하위 요 소 를 링크 에 추가 하 며 초기 상 태 를 설정 합 니 다.

var _container = document.querySelector("." + containerClass);
var _items = document.querySelectorAll("." + itemClass);

var list = loop ? new LinkList() : new SingleList();
for(var i = 0; i < _items.length; i++) {
  list.append(new Node(_items[i]));
}

var _prev = null;  //         
var _current = list.head;  //         ，        

var _normalZIndex = _current.data.style.zIndex;  //      z-index 
var _activeZIndex = _normalZIndex + 1;  //       z-index 

var _itemWidth = _current.data.offsetWidth; //     

positionItems(); //       
zindexItems(_current, _activeZIndex); //            z-index 1

귀속 터치 이벤트
touchstart 이벤트
손가락 을 눌 렀 을 때 초기 위 치 를 저장 합 니 다.

_container.addEventListener("touchstart", function(e) {
  // e.preventDefault();//                       
  var touch = e.touches[0];
  startX = touch.clientX;   //          
  startY = touch.clientY;
  _container.style.webkitTransition = ""; //      
  startT = new Date().getTime();          //           
  isMove = false;
  transitionItems(_prev, false);             //         
  transitionItems(_current, false);          //         
}, false);

touchmove 이벤트
손가락 이 화면 에서 미 끄 러 지고 페이지 가 손가락 을 따라 이동 합 니 다.

_container.addEventListener("touchmove", function(e) {
    // e.preventDefault();//                       
    var touch = e.touches[0];
    var deltaX = touch.clientX - startX;  //     X       
    var deltaY = touch.clientY - startY;  //     Y       
    //  X        Y  ，        
    if (Math.abs(deltaX) > Math.abs(deltaY)){
        translate = deltaX > _itemWidth ? _itemWidth : deltaX;
        translate = deltaX < -_itemWidth ? -_itemWidth : deltaX;

        //              
        moveItems(translate); 

        isMove = true;
    }
}, false);

터치 엔 드 이벤트
손가락 이 화면 을 떠 날 때 마지막 으로 어느 페이지 에 머 물 러 야 하 는 지 계산 합 니 다.

_container.addEventListener("touchend",function(e) {
    // e.preventDefault();//                       

    //    
    var isRollback = false;

    //             
    var deltaT = new Date().getTime() - startT;
    if (isMove) { //       
        //        300ms,        ，         ，       
        if(deltaT < 300){
            translate = translate < 0 ? -_itemWidth : _itemWidth;
        }else {
            //           50%，       
            if (Math.abs(translate) / _itemWidth < 0.5){
                isRollback = true;
            }else{
                //           50%，       
                translate = translate < 0 ? -_itemWidth : _itemWidth;
            }
        }

        moveTo(translate, isRollback);
    }
}, false);

창고
편리 하 게 사용 하기 위해 저 는 전체 실현 과정 을 하나의 라 이브 러 리 로 포장 하고 prev(), next() 방법 을 추 가 했 습 니 다. 사용 은 매우 간단 합 니 다.

CreateCarousel("carousel", "item", true)
  .bindTouchEvent()
  .setItemChangedHandler(onPageChanged);

//  "carousel"      
//  "item"       
//               ，true     

이 라 이브 러 리 는 github 에서 다운로드 할 수 있 습 니 다.
레 퍼 런 스
H5 단일 페이지 제스처 슬라이더 전환 원리
good night！