Der Inhalt dieses Artikels befasst sich mit der Implementierungsmethode des Karusselldiagramms auf mobilen Endgeräten (Quellcode beigefügt). Ich hoffe, dass er für Sie hilfreich ist.
In diesem Artikel wird das Prinzip des nahtlosen Karussells auf dem mobilen Endgerät vorgestellt. Dieses Rad ist relativ einfach, kann aber eine praktische Referenz für Studenten sein, die gerade erst anfangen. Der Endeffekt ist ein nahtloses und unendliches Gleiten auf dem mobilen Endgerät, und die Geschwindigkeit des Karussells kann individuell angepasst werden. Unterstützt Schiebegesten nach links und rechts. Der Quellcode wird am Ende veröffentlicht.
HTML-Teil
<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>Das HTML des Karussellbilds sieht so aus: Schauen wir es uns mit dem CSS an, und dann kommen wir zum CSS.
CSS-Teil
* {
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);
}Wir können durch CSS erkennen, dass .outer die äußerste Hülle ist und der überschüssige Teil ausgeblendet wird. .inner ist ein sehr langer Container und item Für ein einzelnes Element . Der Aufbau ist relativ einfach. ul ist ein kleiner Kontrollpunkt, aber das mobile Endgerät verfügt nicht über die Funktion, auf kleine Punkte zu klicken.
Der Js-Teil der Seite
//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() dient dazu, das Karussellbild zu initialisieren. Die erste Parameter-ID ist die ID der .outer-Box Der zweite Parameter ist die automatische Umschaltzeit. Unten finden Sie eine einfache Click-to-Jump-Funktion.
dGun.js-Initialisierungsteil
//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";
}Ich werde die ersten paar Codezeilen nicht vorstellen, die dazu dienen, den Dom und die Breite zu ermitteln.
Hier sprechen wir über das Kopieren des ersten Elements an das Ende und das Kopieren des letzten Elements an den Anfang. Dies ist der Schlüssel zum Erreichen einer Nahtlosigkeit. Wir haben beispielsweise 3 Bilder 1/2/3 für die Rotation, also brauchen wir Veränderung Der Dom-Knoten wird auf 3/1/2/3/1 gesetzt. Das Prinzip des Karussell-Diagramms besteht darin, dass wir den Wert über TranslateX ändern, um zunächst den Dom-Knoten zu ändern zu 3/ 1/2/3/1, und verwenden Sie dann inner.style.transform = "translateX(-"+_width+"px)"; dieser Code platziert den anfänglichen Karussell-Anzeigebereich auf dem Bild 1. Wenn die Leute dann nach rechts schieben, sollte beim erneuten Schieben nach rechts 1 angezeigt werden, und die rechte Seite von 3 in unserem Dom-Knoten ist 1. Auf diese Weise bewegen wir uns beim Schieben nach rechts auf 1 am Ende schnell zu Position 1 am Anfang durch TranslateX Um ein nahtloses Karussell zu erreichen.
Gestenschiebe-Implementierung
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) //开启轮播
}Wir definieren die Broadcast-Methode, um das Touchscreen-Druckereignis des Benutzers zu überwachen
Wenn der Finger drückt, zeichnen wir die X-Achsen-Position des gedrückten Fingers auf für Umzugs- und Hebeveranstaltungen.
Wenn sich der Finger bewegt, müssen wir den Versatz berechnen und die Position des Inneren durch den Versatz ändern.
Wenn der Finger angehoben wird, prüfen wir, ob der Offset größer als 100 ist. Dieser Wert kann geändert oder in einen Parameter umgewandelt werden. Bestimmen Sie die Richtung durch Positiv und Negativ und bestimmen Sie die aktuelle Zahl durch Index. Wenn es zum ersten und letzten Knoten gleitet, den wir kopiert haben, wird die Wiedergabefunktion ausgeführt, die wir als Nächstes erklären werden. Dann ist es relativ einfach, den Kontrollpunktstil zu ändern und schließlich den Wert zu initialisieren und das Abhörereignis zu löschen.
Wiedergabefunktion, schnelles Scrollen
//首尾无缝连接
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);
}Das Prinzip besteht darin, die Schiebewechselzeit schnell auf 0 zu setzen, wenn das Schieben des Bildes abgeschlossen ist, und TranslateX an die Position zu ändern, an der es sein soll.
Bilder regelmäßig wechseln
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(); //实例触摸Hiermit wird ein Timer gestartet, das innere X um eine feste Zeit versetzt und anhand der Zahl bestimmt, ob die Wiedergabefunktion ausgeführt werden soll.
https://github.com/Zhoujiando... Der Quellcode ist hier, Sie können einen Blick darauf werfen.
Das obige ist der detaillierte Inhalt vonImplementierungsmethode des Karusselldiagramms auf einem mobilen Endgerät (Quellcode beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
