Wie implementiert man Touch-Karussell auf einem mobilen Endgerät in js? (Codebeispiel)

Der Inhalt dieses Artikels besteht darin, die Methode zur Realisierung des Touch-Karusselldiagramms auf dem mobilen Endgerät vorzustellen. Ich hoffe, dass es für Sie hilfreich ist.

Touch-Karussell

touchKarussell dient eigentlich dazu, das Karussell durch Bewegen des Fingers nach links und rechts zu wechseln. Im Folgenden verwenden wir einen Fall, um es umzusetzen.

1. HTML-Struktur

In Bezug auf die Struktur werden ul und li weiterhin zum Speichern von Karussellbildern und ol und li zum Speichern von Karussellpunkten verwendet :

2. Stilinitialisierung Einige Tags von

html verfügen beispielsweise über einen Rand von Um das Erscheinungsbild nicht zu beeinträchtigen, müssen wir es entfernen. body

/* 清除标签默认边距 */
body,ul,li,ol,img {
    margin: 0;
    padding: 0;
}

/* 清除 ul 等标签前面的“小圆点” */
ul,li,ol {
    list-style-type: none;
}

/* 图片自适应 */
img {
    width: 100%;
    height: auto;
    border: none;
    /* ie8 */
    display: block;
    -ms-interpolation-mode: bicubic; /*为了照顾ie图片缩放失真*/
}

Nach dem Login kopieren

verwendet, um das Konzept des Verschiebens von a zu verwirklichen Karussellbild, aber die damalige Methode war js Floating. Hier stelle ich Ihnen eine neue Methode vor – die Positionierung. li

Idee:

• Geben Sie der

  äußeren Box eine relative Positionierung ul

• Die

  -Höhe kann hier nicht fest codiert werden. Aufgrund der absoluten Positionierung von ul gibt es jedoch keine Möglichkeit, diese Höhe zu erweitern muss dynamisch in li festgelegt werden; liuljs

  legt die relative Positionierung für
fest, und sowohl
• als auch

  sind li und fügen dann a hinzu left-Attribut zu top für den Zweck Das anfänglich angezeigte Bild ist leer, und dann müssen Sie in 0 nur den li-Wert jedes transform:translateX(300%) dynamisch festlegen, um ein Karussell zu erreichen; jsli Legen Sie den Bereich für kleine Punkte fest. Da die Anzahl der kleinen Punkte unbekannt ist, ist auch die Breite von translateX unbekannt. Wenn Sie ein Feld mit unbekannter Breite horizontal zentrieren möchten, können Sie

  verwenden Positionierung kombiniert mit
Prozentsatz;

• olabsoluteLegen Sie eine Breite und Höhe für das left unter

  fest, fügen Sie ein abgerundetes Randattribut hinzu und verschieben Sie es nach links Es kann eine Reihe hohler Punkte angezeigt werden.

• olFügen Sie abschließend eine Stilklasse hinzu und legen Sie darin ein Hintergrundattribut fest, um die kleinen Punkte anzuzeigen, die dem aktuell angezeigten Bild entsprechen. li

rrree
4. js-Vorbereitung

Bedenken Sie zunächst nichts anderes. Während der Initialisierung ist das Erste, was Sie tun müssen Das Beste ist,

jsHöhe dynamisch festlegen für ul

• Kleine Punkte dynamisch generieren (Anzahl kleiner Punkte basierend auf der Anzahl der Bilder erstellen, UL Hinzufügen

  )

• i=0Initialisieren Sie die drei Grundpositionen von active

• li, um jeweils drei Variablen zu definieren Zum Speichern der Indizes von drei

  (
speichert den Index des letzten Bildes,
und
• speichern die Indizes des ersten bzw. zweiten Bildes)

  lileftcenterVerwenden Sie right, um die Position der drei

  in der
-Richtung nach der Positionierung festzulegen

• 数组[下标]li

  /* 轮播图最外层盒子 */
  .carousel {
      position: relative;
      overflow: hidden;
  }
  
  .carousel ul {
      /* 这个高度需要在JS里面动态添加 */
  }
  
  .carousel ul li {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      /* 使用 transform:translaX(300%) 暂时将 li 移动到屏幕外面去*/
      -webkit-transform: translateX(300%);
      transform: translateX(300%);
  }
  
  /* 小圆点盒子 */
  .carousel .points {
      /* 未知宽度的盒子，使用 absolute 定位，结合 transform 的方式进行居中 */
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
  }
  
  /* 小圆点 */
  .carousel .points li {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      border: 1px solid #fff;
      float: left;
      margin: 0 2px;
  }
  
  /* 选中小圆点的样式类 */
  .carousel .points li.active {
      background-color: #fff;
  }

  Nach dem Login kopieren
  left

5. Fügen Sie einen Timer hinzu, um die Bilder zu bewegen

Die Karussellbilder drehen sich von selbst, Sie müssen also a verwenden Timer, um ab und zu eine Rotationsfunktion auszuführen.

• Extremes Werturteil

• Einstellungen Übergang (Der Ersatz muss nicht umgestellt werden)

• Zurück

• Small Dot Focus Linkage

var carousel = document.querySelector('.carousel');
var carouselUl = carousel.querySelector('ul');
var carouselLis = carouselUl.querySelectorAll('li');
var points = carousel.querySelector('ol');
// 屏幕的宽度（轮播图显示区域的宽度）
var screenWidth = document.documentElement.offsetWidth;

// 1- ul设置高度
carouselUl.style.height = carouselLis[0].offsetHeight + 'px';

// 2- 生成小圆点
for(var i = 0; i 

6. touch 滑动

移动端的轮播图，配合touch滑动事件，效果更加友好。

• 分别绑定三个touch事件

• touchstart里面记录手指的位置，清除定时器，记录时间

• touchmove里面获取差值，同时清除过渡，累加上差值的值

• touchend里面判断是否滑动成功，滑动的依据是滑动的距离（绝对值）

• 超过屏幕的三分之一或者滑动的时间小于300毫秒同时距离大于30（防止点击就跑）的时候都认为是滑动成功

• 在滑动成功的条件分支里面在判断滑动的方向，根据方向选择调用上一张还是下一张的逻辑

• 在滑动失败的条件分支里面添加上过渡，重新进行归位

• 重启定时器

var carousel = document.querySelector('.carousel');
var carouselUl = carousel.querySelector('ul');
var carouselLis = carouselUl.querySelectorAll('li');
var points = carousel.querySelector('ol');
// 屏幕的宽度
var screenWidth = document.documentElement.offsetWidth;
var timer = null;

// 设置 ul 的高度
carouselUl.style.height = carouselLis[0].offsetHeight + 'px';

// 动态生成小圆点
for (var i = 0; i  carouselLis.length - 1) {
        right = 0;
    }
    //添加过渡（多次使用，封装成函数）
    setTransition(1, 1, 0);
    // 归位
    setTransform();
    // 自动设置小圆点
    setPoint();
}

// 轮播图片切换上一张
function showPrev() {
    // 轮转下标
    right = center;
    center = left;
    left--;
    //　极值判断
    if (left  screenWidth / 3 || (dTime  30)) {
        // 滑动成功了
        // 判断用户是往哪个方向滑
        if (dx > 0) {
            // 往右滑 看到上一张
            showPrev();
        } else {
            // 往左滑 看到下一张
            showNext();
        }
    } else {
        // 添加上过渡
        setTransition(1, 1, 1);
        // 滑动失败了
        setTransform();
    }

    // 重新启动定时器
    clearInterval(timer);
    // 调用定时器
    timer = setInterval(showNext, 2000);
}
// 设置过渡
function setTransition(a, b, c) {
    if (a) {
        carouselLis[left].style.transition = 'transform 1s';
    } else {
        carouselLis[left].style.transition = 'none';
    }
    if (b) {
        carouselLis[center].style.transition = 'transform 1s';
    } else {
        carouselLis[center].style.transition = 'none';
    }
    if (c) {
        carouselLis[right].style.transition = 'transform 1s';
    } else {
        carouselLis[right].style.transition = 'none';
    }
}

//　封装归位
function setTransform(dx) {
    dx = dx || 0;
    carouselLis[left].style.transform = 'translateX(' + (-screenWidth + dx) + 'px)';
    carouselLis[center].style.transform = 'translateX(' + dx + 'px)';
    carouselLis[right].style.transform = 'translateX(' + (screenWidth + dx) + 'px)';
}
// 动态设置小圆点的active类
var pointsLis = points.querySelectorAll('li');

function setPoint() {
    for (var i = 0; i <p style="text-align: center;"><img src="https://img.php.cn//upload/image/632/309/128/Wie%20implementiert%20man%20Touch-Karussell%20auf%20einem%20mobilen%20Endger%C3%A4t%20in%20js?%20(Codebeispiel)" title="Wie implementiert man Touch-Karussell auf einem mobilen Endgerät in js? (Codebeispiel)" alt="Wie implementiert man Touch-Karussell auf einem mobilen Endgerät in js? (Codebeispiel)"    style="max-width:90%"  style="max-width:90%"></p><p><strong>效果图：</strong></p><p style="text-align: center;"><img src="https://img.php.cn//upload/image/837/946/969/Wie%20implementiert%20man%20Touch-Karussell%20auf%20einem%20mobilen%20Endger%C3%A4t%20in%20js?%20(Codebeispiel)" title="Wie implementiert man Touch-Karussell auf einem mobilen Endgerät in js? (Codebeispiel)" alt="Wie implementiert man Touch-Karussell auf einem mobilen Endgerät in js? (Codebeispiel)"    style="max-width:90%"  style="max-width:90%"></p><p>以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！</p>

Das obige ist der detaillierte Inhalt vonWie implementiert man Touch-Karussell auf einem mobilen Endgerät in js? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!