이 글의 내용은 모바일 단말에서 캐러셀 차트를 구현하는 방법에 관한 것입니다(소스 코드 첨부). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
이 글에서는 모바일 단말에서 원활한 캐러셀 차트 구현의 원리를 소개합니다. 이 휠은 비교적 간단하지만 이제 막 시작하는 학생들에게 편리한 참고 자료가 될 수 있습니다. 최종 효과는 모바일 단말기에서 매끄럽고 무한한 슬라이딩이며 캐러셀의 속도를 맞춤 설정할 수 있습니다. 왼쪽 및 오른쪽 슬라이딩 제스처를 지원합니다. 소스코드는 마지막에 게시하겠습니다.
HTML 부분
<div class="outer" id="oneTest">
<div class="inner">
<div class="goIndex item" goUrl="https://www.baidu.com"
style="background-image:url(1.jpg)"></div>
<div class="goIndex item" goUrl="https://www.baidu.com"
style="background-image:url(2.jpg)"></div>
<div class="goIndex item" goUrl="https://www.baidu.com"
style="background-image:url(3.jpg)"></div>
</div>
<ul class="num"></ul>
</div>캐러셀 이미지의 html은 CSS로 살펴보고 CSS로 넘어가겠습니다.
Css 부분
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.outer {
margin: 0 auto;
width: 100%;
height: 150px;
overflow: hidden;
position: relative;
}
.inner {
height: 150px;
overflow: hidden;
width: 8000px;
}
.inner .goIndex {
float: left;
height: 150px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.num {
position: absolute;
left: 0;
right: 0;
bottom: 20%;
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
}
.num li {
margin: 0 3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 0, 0, .2);
}
.num li.select {
background: rgba(0, 0, 0, .7);
}CSS를 통해 .outer가 가장 바깥쪽 쉘이고, 남는 부분은 숨겨져 있음을 알 수 있습니다. .inner는 매우 긴 컨테이너이고 item은 단일 항목입니다. 구조는 비교적 간단합니다. ul은 작은 제어점인데 모바일 단말기에는 작은 점을 클릭하는 기능이 없습니다.
페이지
//function dGun(obj = {}) 这是dGun.js的主函数
// 初始化两个图片轮播
dGun({id:"oneTest",time:10000});
dGun({id:"twoTest",time:4000});
// 点击后跳转
var goList = document.getElementsByClassName("goIndex");
for (var i = 0; i < goList.length; i++) {
goList[i].addEventListener("click", function () {
window.location = this.getAttribute("goUrl")
})
}dGun()의 Js 부분은 캐러셀 이미지를 초기화하는 것입니다. 첫 번째 매개변수 id는 외부 상자의 ID이고 두 번째 매개변수는 자동 전환 시간입니다. 아래는 간단한 클릭으로 점프하는 기능입니다.
dGun.js 초기화 부분
//function dGun(obj = {}) 包裹全部dGun内代码
var id = obj.id; //获取domid
var time = obj.time ? parseInt(obj.time) : 3000; //默认3s
time = time > 300 ? time : 1000; //间隔必须大于300
var _width = document.querySelector("#"+id).offsetWidth; //获取轮播图宽度
var _index = 0; //当前是第几个轮播 从-1开始
var inner = document.querySelector("#"+id+" .inner"); //获取轮播内容外壳（很长的那个）
var items = document.querySelectorAll("#"+id+" .item"); //获取轮播元素
// 将第一个元素复制到最后，将最后的元素复制到开头
var firstItem = items[0];
var lastItem = items[items.length-1];
inner.insertBefore(lastItem.cloneNode(true),firstItem);
inner.appendChild(firstItem.cloneNode(true));
inner.style.transform = "translateX(-"+_width+"px)";
// 生成底部小圆点
var imgLength = document.querySelector("#"+id+" .inner").children.length-2;
var makeCir = '<li class="select"></li>';
for (var i = 0; i < imgLength - 1; i++) {
makeCir += '<li></li>';
}
document.querySelector("#"+id+" .num" ).innerHTML = makeCir;
//设置轮播的宽度。
var newItems = document.querySelectorAll("#"+id+" .item");
for(var i = 0; i<newItems.length;i++){
newItems[i].style.width = _width+"px";
}돔을 구하고 너비를 구하는 코드의 처음 몇 줄은 소개하지 않겠습니다.
여기에서는 첫 번째 요소를 끝에 복사하고 마지막 요소를 처음에 복사하는 방법에 대해 설명합니다. 이것이 원활함을 달성하는 열쇠입니다. 예를 들어 회전을 위해 3개의 그림이 있으므로 다음을 복사해야 합니다. dom 노드가 3/1/2/3/1로 변경됩니다. 회전식 차트의 원리는 여러 항목이 병치되는 것입니다. 먼저 dom 노드를 변경합니다. 3/1/ 2/3/1로 변경한 다음 inner.style.transform = "translateX(-"+_width+"px)";를 사용하면 이 코드는 그림 1에 초기 캐러셀 표시 영역을 배치합니다. 그런 다음 사람들이 오른쪽으로 슬라이드하면 3으로 다시 슬라이드하면 1이 표시되고 돔 노드에서 3의 오른쪽은 1이 됩니다. 이런 식으로 마지막에 1로 오른쪽으로 슬라이드하면 빠르게 다음으로 이동합니다. 원활한 캐러셀을 달성하기 위해 TranslateX를 통해 처음에 1의 위치를 지정합니다.
제스처 슬라이딩 구현
var startX = 0, changedX = 0, originX = 0, basKey = 0;
//手指点击的X位置 滑动改变X的位置 inner的translateX的值 basKey是个钥匙
function Broadcast() {
var that = this;
this.box = document.querySelector("#"+id+" .inner");
this.box.addEventListener("touchstart", function (ev) {
that.fnStart(ev);
})
}
// 轮播手指按下
Broadcast.prototype.fnStart = function (ev) {
clearInterval(autoPlay); //手指按下的时候清除定时轮播
if (!basKey) {
var that = this;
startX = ev.targetTouches[0].clientX;
var tempArr = window.getComputedStyle(inner).transform.split(",");
//获取当前偏移量
if (tempArr.length > 2) {
originX = parseInt(tempArr[tempArr.length - 2]) || 0;
}
this.box.ontouchmove = function (ev) {
that.fnMove(ev)
}
this.box.ontouchend = function (ev) {
that.fnEnd(ev)
}
}
};
// 轮播手指移动
Broadcast.prototype.fnMove = function (ev) {
ev.preventDefault();
changedX = ev.touches[0].clientX - startX;
var changNum = (originX + changedX);
this.box.style.cssText = "transform: translateX(" + changNum + "px);";
};
// 轮播手指抬起
Broadcast.prototype.fnEnd = function (ev) {
// 移除底部按钮样式
document.querySelector("#"+id+" .select").classList.remove("select");
basKey = 1;
setTimeout(function () {
basKey = 0;
}, 300)
if (changedX >= 100) { //向某一方向滑动
var _end = (originX + _width);
this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
_index--;
if (_index == -1) { //滑动到第一个了，为了实现无缝隙，滚到最后去
document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
play(-1);
}
} else if (changedX < -100) { //向负的某一方向滑动
var _end = (originX - _width);
this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
_index++;
if (_index == imgLength) { //滑到最后一个了，为了实现无缝隙，滚到前面去
play(imgLength);
document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select");
}
} else { //滑动距离太短，没吃饭不用管
this.box.style.cssText = "transform: translateX(" + originX + "px);transition:all .3s";
}
// 完成一次滑动初始化值
startX = 0;
changedX = 0;
originX = 0;
if (_index != -1 && _index != imgLength) {
document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select");
}
this.box.ontouchmove = null; //清除事件
this.box.ontouchend = null; //清除绑定事件
autoPlay = setInterval(lunbo, time) //开启轮播
}사용자의 터치스크린 누름 이벤트를 모니터링하는 브로드캐스트 방식을 정의합니다.
손가락이 눌려지면 손가락이 눌려진 X축 위치를 기록하고 움직임과 들어올림 이벤트를 모니터링합니다.
손가락이 움직일 때 해야 할 일은 오프셋을 계산하고 오프셋을 통해 내부의 위치를 변경하는 것입니다.
손가락을 떼면 오프셋이 100보다 큰지 확인합니다. 이 값을 변경하거나 매개변수로 변경할 수 있습니다. 양수와 음수로 방향을 결정하고, 인덱스로 현재 숫자를 결정합니다. 복사한 첫 번째 노드와 마지막 노드로 슬라이드하면 다음에 설명할 재생 기능이 실행됩니다. 그런 다음 제어점 스타일을 변경하고 마지막으로 값을 초기화하고 청취 이벤트를 지우는 것이 상대적으로 간단합니다.
재생 기능, 빠른 스크롤
//首尾无缝连接
function play(index) {
setTimeout(function () {
inner.style.transition = 'all 0s';
if (index == -1) {
var _number = -imgLength * _width;
inner.style.transform = 'translateX(' + _number + 'px)';
_index = imgLength - 1;
} else if (index == imgLength) {
inner.style.transform = 'translateX(-' + _width + 'px)';
_index = 0;
}
}, 250);
}그림 슬라이딩이 완료되면 슬라이딩 변경 시간을 빠르게 0으로 설정하고, TranslateX를 가야 할 위치로 변경하는 것이 원칙입니다.
사진을 정기적으로 전환하세요
function lunbo(){
document.querySelector("#"+id+" .select").classList.remove("select");
var tempArr = window.getComputedStyle(inner).transform.split(",");
if (tempArr.length > 2) {
originX = parseInt(tempArr[tempArr.length - 2]) || 0;
}
var _end = (originX - _width);
inner.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
_index++;
if (_index != -1 && _index != imgLength) {
document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select");
}else if(_index == -1 ){
document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
} else if (_index == imgLength) {
play(imgLength);
document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select");
}
}
// 初始化轮播
var autoPlay = setInterval(lunbo,time); //开启轮播
var _Broadcast = new Broadcast(); //实例触摸타이머를 시작하고, 내부 X를 고정된 시간만큼 오프셋하고, 숫자에 따라 재생 기능 실행 여부를 결정하는 것입니다.
https://github.com/Zhoujiando... 소스 코드는 여기에 있으니 살펴보실 수 있습니다.
위 내용은 모바일 단말기에서 캐러셀 차트를 구현하는 방법(소스코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
