저는 프론트엔드가 처음인데 휴대폰에서 터치스크린 캐러셀을 구현하는 과정을 공유하고 싶습니다. 일반적인 기능은 다음과 같습니다.
원형 슬라이딩을 지원합니다.
너비는 임의로 설정할 수 있으며 화면의 너비와 같을 필요는 없습니다
페이지를 세로로 스크롤할 수 있습니다
콜백 모니터링 요소를 스위치로 설정할 수 있음
타사 라이브러리가 없는 순수 js
하위 요소 가정.item
width
은 375px입니다. 절대 위치 지정을 사용하여 모든 하위 요소를 상위 요소 안에 배치합니다.
상위 요소 .carousel
의 width
를 375px로 설정하고 하위 요소 .item
동일한 너비
상위 요소 .carousel
에 대한 터치 이벤트 추가: touchstart
, touchmove
, touchend
손가락 누르기 손가락 슬라이드 시 초기 위치(clientX
)가 저장됩니다. 손가락을 왼쪽으로 슬라이드하면 현재 요소가 이동합니다. 동시에 현재 요소의 오른쪽에 있는 요소
손가락을 오른쪽으로 밀면 현재 요소와 현재 요소의 왼쪽에 있는 요소가 동시에 이동됩니다. 시간
손가락을 떼면 슬라이딩 거리에 따라 다음 페이지로 넘어갈지 여부가 결정됩니다.
이동 거리가 하위 요소 너비의 50%를 초과하여 현재 요소가 다음 요소로 전환됩니다.
속성을
으로 설정하고로 설정하고 transform
속성을 +1translate3d(0px, 0px, 0px)
z-index
으로 설정하고 속성 +1transform
translate3d(375px, 0px, 0px)
z-index
transform
translate3d(-375px, 0px, 0px)
z-index
첫 번째 자식 요소의 이전 요소가 마지막 요소이고, 마지막 요소의 다음 요소가 첫 번째 요소가 됩니다. 이 단계는 순환 연결 목록을 통해 구현됩니다.
z-index
이동 시 상위 요소가 아닌 하위 요소 .item의 변환 속성이 설정됩니다.
//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%; }
초기 상태 설정
먼저 이중 연결 목록을 구현하여 캐러셀 구성 요소의 요소를 유지합니다..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
_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为循环播放
참조
잘자요! prev()
next()
[관련 추천]
1.
무료 h5 온라인 동영상 튜토리얼 HTML5 정식 버전 매뉴얼3.
php.cn 원본 html5 동영상 튜토리얼위 내용은 H5를 사용하여 캐러셀(터치스크린 버전)을 구현하는 방법에 대한 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!