jsでモバイル端末にタッチカルーセルを実装するにはどうすればよいですか? (コード例)

この記事はモバイル端末上でTouchカルーセルチャートをjsで実現する方法を紹介するもので、困っている方は参考にしていただければ幸いです。

タッチカルーセルチャート

タッチカルーセルチャートは実際に指をスライドさせることでカルーセルチャートを左右に切り替えます。以下では事例を使って実装していきます。

1. html 構造

構造的には、カルーセル画像の保存に ul、li を使用します。ol、#カルーセル ドットを保存する ##li:

2. スタイル初期化のいくつかのタグ

##html

があります。たとえば、一部のデフォルト スタイルでは、body タグにはデフォルトでマージンが設定されており、外観に影響を与えないようにする必要があります。 <pre class="brush:php;toolbar:false">/* 清除标签默认边距 */ 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图片缩放失真*/ }</pre>

3. スタイルの追加

先ほど特殊効果について話したとき、ネイティブ

js

を使用して移動する方法について話しました。ホイール 映像を放送するという概念がありましたが、当時は li を介して浮遊する方法が使用されていました。ここでは、新しい方法であるポジショニングを紹介したいと思います。 #アイデア:

#外側のボックスに相対的な位置を

ul

に指定します。

• #ここでの ul

  の高さは
li
• の高さである必要がありますが、

  li の絶対位置により、これを拡張する方法はないので、ul は js で高さを動的に設定する必要があります。 # の相対位置を設定します。 ##li、left、top は両方とも

  0
で、
• transform:translateX(300%)

  を追加しますli 属性に追加する場合、目的は、表示される画像を空に初期化し、## の各 li の translateX 値を動的に設定することだけです。カルーセルを実現する #js; 小ドットの数が不明のため、ol の幅も不明です。幅が不明なボックスを水平方向に中央に配置したい場合は、absolute 配置と left パーセンテージを組み合わせて実行できます。 ol

  次の
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;
  }

4. js の準備作業

• 初期化中は、他のことを最初に考慮しないでください。 、最初に行うことは、ul に高さを追加することです。そうしないと、画像が表示されません。

• UL

の高さを動的に設定します。 小さなドットを動的に生成します (画像の数に基づいて小さなドットを作成します) Number, i=0

Add

active

)

3 つの基本位置を初期化します li

• 3 つの変数を定義します。これらは、3 つの

  li
の添字を格納するために使用されます (
• left

  は、最後の図 center の添字を格納します) と right にはそれぞれ 1 番目と 2 番目の画像の添字が格納されます)

• から 配列 [添字] を設定する方法

  left
方向の 3 つの
li
• の位置

  <pre class="brush:php;toolbar:false">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 </pre>##レンダリング:

• 5. 画像を動かすためのタイマーを追加します。カルーセル画像は自動的に回転するため、タイマーを使用して実行する必要があります。時々ローテーション機能。 #タイマーを追加し、タイマー内の添字を回転させる

極値判定

設定トランジション（代替者はトランジションする必要はありません）

リターン

小点フォーカス連動

var timer = null;
// 调用定时器
timer = setInterval(showNext, 2000);

// 轮播图片切换
function showNext(){
    // 轮转下标
    left = center;
    center = right;
    right++;
    // 极值判断
    if(right > carouselLis.length - 1){
        right = 0;
    }

    //添加过渡
    carouselLis[left].style.transition = 'transform 1s';
    carouselLis[center].style.transition = 'transform 1s';
    // 右边的图片永远是替补的，不能添加过渡
    carouselLis[right].style.transition = 'none';
    // 归位
    carouselLis[left].style.transform = 'translateX('+ (-screenWidth) +'px)';
    carouselLis[center].style.transform = 'translateX(0px)';
    carouselLis[right].style.transform = 'translateX('+ screenWidth +'px)';
    // 自动设置小圆点
    setPoint();
}

// 动态设置小圆点的active类
var pointsLis = points.querySelectorAll('li');
function setPoint(){
    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/js%E3%81%A7%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E7%AB%AF%E6%9C%AB%E3%81%AB%E3%82%BF%E3%83%83%E3%83%81%E3%82%AB%E3%83%AB%E3%83%BC%E3%82%BB%E3%83%AB%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B?%20(%E3%82%B3%E3%83%BC%E3%83%89%E4%BE%8B)" title="jsでモバイル端末にタッチカルーセルを実装するにはどうすればよいですか? (コード例)" alt="jsでモバイル端末にタッチカルーセルを実装するにはどうすればよいですか? (コード例)"    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/js%E3%81%A7%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E7%AB%AF%E6%9C%AB%E3%81%AB%E3%82%BF%E3%83%83%E3%83%81%E3%82%AB%E3%83%AB%E3%83%BC%E3%82%BB%E3%83%AB%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B?%20(%E3%82%B3%E3%83%BC%E3%83%89%E4%BE%8B)" title="jsでモバイル端末にタッチカルーセルを実装するにはどうすればよいですか? (コード例)" alt="jsでモバイル端末にタッチカルーセルを実装するにはどうすればよいですか? (コード例)"    style="max-width:90%"  style="max-width:90%"></p><p>以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！</p>

以上がjsでモバイル端末にタッチカルーセルを実装するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。