H5를 사용하여 캐러셀(터치스크린 버전)을 구현하는 방법에 대한 예제 튜토리얼

저는 프론트엔드가 처음인데 휴대폰에서 터치스크린 캐러셀을 구현하는 과정을 공유하고 싶습니다. 일반적인 기능은 다음과 같습니다.

1. 원형 슬라이딩을 지원합니다.

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

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

4. 콜백 모니터링 요소를 스위치로 설정할 수 있음

5. 타사 라이브러리가 없는 순수 js

원칙

1. 하위 요소 가정.item width은 375px입니다. 절대 위치 지정을 사용하여 모든 하위 요소를 상위 요소 안에 배치합니다.

2. 상위 요소 .carousel의 width를 375px로 설정하고 하위 요소 .item 동일한 너비

3. 상위 요소 .carousel에 대한 터치 이벤트 추가: touchstart, touchmove, touchend

4. 손가락 누르기 손가락 슬라이드 시 초기 위치(clientX)가 저장됩니다. 손가락을 왼쪽으로 슬라이드하면 현재 요소가 이동합니다. 동시에 현재 요소의 오른쪽에 있는 요소

5. 손가락을 오른쪽으로 밀면 현재 요소와 현재 요소의 왼쪽에 있는 요소가 동시에 이동됩니다. 시간

1. 손가락을 떼면 슬라이딩 거리에 따라 다음 페이지로 넘어갈지 여부가 결정됩니다.

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

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

1. 은 현재 요소의

   속성을 ​​

   으로 설정하고
속성을 ​​+1로 설정합니다.
은 다음 요소를 설정합니다. child 요소의
3. 속성을 ​​

   로 설정하고 transform 속성을 ​​+1translate3d(0px, 0px, 0px)z-index

설정합니다. 이전 하위 요소의
4. 속성을 ​​

   으로 설정하고 속성 +1transformtranslate3d(375px, 0px, 0px)z-index

   다른 모든 하위 요소의
속성을 ​​기본값으로 설정합니다.

5. transformtranslate3d(-375px, 0px, 0px)z-index첫 번째 자식 요소의 이전 요소가 마지막 요소이고, 마지막 요소의 다음 요소가 첫 번째 요소가 됩니다. 이 단계는 순환 연결 목록을 통해 구현됩니다.

6. z-index이동 시 상위 요소가 아닌 하위 요소 .item의 변환 속성이 ​​설정됩니다.

7. 구현 단계
   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

초기 상태 설정.carousel

먼저 이중 연결 목록을 구현하여 캐러셀 구성 요소의 요소를 유지합니다.

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

터치무브 이벤트

화면에서 손가락이 슬라이드되고, 손가락과 함께 페이지가 이동합니다

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

캐러셀 라이브러리

사용하기 쉽도록 캡슐화했습니다. 전체 구현 과정을 라이브러리에 추가하고

,

메서드를 추가하면 사용이 매우 간단합니다.

<script src="lib/carousel.js"></script>

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

//参数"carousel"为容器的类名
//参数"item"为子元素的类名
//第三个参数设置是否需要循环播放，true为循环播放

라이브러리는 github

참조

에서 다운로드할 수 있습니다. H5 단일 페이지 제스처 슬라이딩 화면 전환 원리

잘자요! prev()next()[관련 추천]

1.

무료 h5 온라인 동영상 튜토리얼

HTML5 정식 버전 매뉴얼

3.

php.cn 원본 html5 동영상 튜토리얼

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