H5를 사용하여 캐러셀의 터치스크린 버전을 구현하는 방법에 대한 자세한 소개

이번 글은 H5를 활용하여 터치스크린 캐러셀을 구현하는 방법을 주로 소개하고 있는데, 에디터가 꽤 괜찮다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다.

프론트엔드가 처음인데, 휴대폰에서 터치스크린 캐러셀을 구현하는 과정을 공유합니다.

1. 원형 슬라이딩 지원

2. 너비는 임의로 설정할 수 있으며 화면 너비와 동일할 필요는 없습니다

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

4. 콜백 수신 요소는 타사 라이브러리 없이

5, 순수 js

원칙

1. 하위 요소 .item의

너비가 375px라고 가정하고 절대 위치 지정을 사용하여 모든 하위 요소를 상위 요소 내에 배치합니다

2. 상위 요소 .carousel의 너비를 하위 요소 .item

과 동일한 너비인 375px로 설정합니다. 3. 상위 요소 .carousel에 터치

이벤트 를 추가합니다. , touchmove, touchend

4. 손가락을 눌렀을 때 초기 위치 저장(clientX)

5. 손가락이 슬라이드되면 슬라이딩 거리로 슬라이딩 방향을 판단합니다.

① 손가락을 왼쪽으로 슬라이드하면 현재 요소와 현재 요소의 오른쪽에 있는 요소가 동시에 이동합니다.

② 손가락을 오른쪽으로 슬라이드하면 현재 요소와 현재 요소의 왼쪽 요소를 동시에 이동

6. 손가락을 떼면 슬라이딩 거리를 이용해 다음 페이지로 전환할지 결정

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

②이동 거리가 자식 요소 너비의 50%를 초과하여 현재 요소가 다음 요소로 전환됩니다.

③ 현재 요소의 trans

form 속성 을translate3d(0px, 0px, 0px)로 설정하고, z-index 속성을 ​​설정합니다. +1

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

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

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

7, 첫 번째 자식 요소의 이전 요소가 마지막 요소이고, 마지막 요소의 다음 요소가 첫 번째 요소가 됩니다. 이 단계는 순환 연결 목록을 통해 구현됩니다.

이동 시 상위 요소 .carousel이 아닌 하위 요소 .item의 변환 속성이 ​​설정됩니다.

구현 단계

html&css

//html
<p class="carousel" ontouchstart="" >  
  <p class="item" style="background: #3b76c0" >    
    <h3 >item-1</h3>  
  </p>  
  <p class="item" style="background: #58c03b;">    
    <h3>item-2</h3>  
  </p>  
  <p class="item" style="background: #c03b25;">    
    <h3>item-3</h3>
  </p> 
  <p class="item" style="background: #e0a718;">  
    <h3>item-4</h3>  
  </p>  
  <p class="item" style="background: #c03eac;">    
    <h3>item-5</h3>  
  </p>
</p>

//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

바인드 터치 이벤트

터치스타트 이벤트

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

_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);

터치무브 이벤트

화면에서 손가락으로 슬라이드하면, 손가락으로 페이지가 이동합니다

rreee

터치엔드 이벤트

손가락이 화면을 떠날 때 어느 페이지로 끝나야 할지 계산

_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);

캐러셀 라이브러리

사용 편의성을 위해 전체 구현 과정을 라이브러리에 캡슐화하고 prev() 및 next() 메서드를 추가했습니다. 사용이 매우 간단합니다. :

아아아

위 내용은 H5를 사용하여 캐러셀의 터치스크린 버전을 구현하는 방법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!