지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)

js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)

青灯夜游
풀어 주다： 2019-01-05 09:37:51
앞으로
4979명이 탐색했습니다.

이 글의 내용은 js를 사용하여 터치 캐러셀 차트를 모바일 단말기에서 구현하는 방법을 소개하는 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

터치 캐러셀

터치 캐러셀은 실제로 손가락을 밀어서 캐러셀을 좌우로 전환하는 케이스를 사용해 구현해 보겠습니다. touch轮播图其实就是通过手指的滑动，来左右切换轮播图，下面我们通过一个案例，来实现下。

1. html 结构

结构上，还是用ul、li来存放轮播图片，ol、li来存放轮播小圆点：

js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)

2. 样式初始化

html的一些标签，都会有一些默认样式，比如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图片缩放失真*/
}
로그인 후 복사

js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)

3. 添加样式

在前面讲特效的时候，我们说过如何使用原生js实现移一个轮播图的概念，但是当时的方式是通过li浮动，这里给大家介绍一种新的方——定位。

思路：

  • 给ul外层的盒子一个相对定位；

  • 这里的ul高度不能写死，它应该是li撑开的高度，但是由于li绝对定位，没办法撑开这个高度，所以这里的ul需要在js里面动态设置高度；

  • 给li设置相对定位，并且left、top都为0，再给li添加一个transform:translateX(300%)属性，目的是初始化显示的图片为空，然后在js里只需要动态设置每个li的translateX值，即可实现轮播；

  • 设置小圆点区域，因为小圆点个数未知，所以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;
}
로그인 후 복사

js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)

4. js 准备工作

先不考虑别的，js在初始化的时候，首先要做的就是给ul添加上一个高度，不然图片是不显示的。

  • 给UL动态设置高度

  • 动态生成小圆点 （根据图片的张数创建小圆点个数，i=0 添加active）

  • 初始化三个li的基本位置

    • 定义三个变量，分别用来存储三个li的下（left存储最后一张图片的下标，center和right分别存储第一张和第二张的下标）

    • 通过数组[下标]的方式给三个li设置定位后left

      1. HTML 구조
    구조적으로 ul 및 li는 여전히 캐러셀 이미지를 저장하는 데 사용되며 ol 및 li 캐러셀 도트 저장:

js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)

2. 스타일 초기화

html의 일부 태그에는 body 와 같은 기본 스타일이 있습니다. code> 태그에는 기본적으로 여백이 있으므로 모양에 영향을 주지 않도록 지워야 합니다. 

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 <img src="https://img.php.cn//upload/image/348/688/538/js%EC%9D%98%20%EB%AA%A8%EB%B0%94%EC%9D%BC%20%EB%8B%A8%EB%A7%90%EA%B8%B0%EC%97%90%20Touch%20carousel%EC%9D%84%20%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%9D%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C?%20(%EC%BD%94%EB%93%9C%20%EC%98%88)" title="js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)" alt="js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)"    style="max-width:90%"  style="max-width:90%"><p style="text-align: center;"><img src="https://img.php.cn//upload/image/609/739/253/js%EC%9D%98%20%EB%AA%A8%EB%B0%94%EC%9D%BC%20%EB%8B%A8%EB%A7%90%EA%B8%B0%EC%97%90%20Touch%20carousel%EC%9D%84%20%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%9D%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C?%20(%EC%BD%94%EB%93%9C%20%EC%98%88)" title="js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)" alt="js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)"    style="max-width:90%"  style="max-width:90%">3. 스타일 추가</p><h3>앞서 특수 효과에 대해 이야기할 때 캐러셀 이미지를 움직이는 개념을 구현하기 위해 네이티브 <code>js</code>를 사용하는 방법에 대해 이야기했지만, 그 때의 방법은 <code>li</code>를 통해 플로팅하는 것입니다. 여기서는 새로운 방법인 포지셔닝을 소개하겠습니다. </h3><blockquote></blockquote>아이디어:
로그인 후 복사

    • ul의 외부 상자에 상대 위치를 지정하세요.

    • 여기서 ul의 높이는 직접 작성할 수 없습니다. li의 높이이지만 li의 절대 위치로 인해 이 높이를 확장할 방법이 없으므로 여기서 ul가 필요합니다. js에서 높이를 동적으로 설정하세요. <li><p></p></li> <code>li, left 및 top에 대한 상대 위치 설정 code>는 모두 <code>0이고 li에 transform:translateX(300%) 속성을 ​​추가합니다. 목적은 표시된 이미지를 초기화하는 것입니다. 비어 있으면 js에서 캐러셀

    • Set을 달성하려면 각 li의 translateX 값만 동적으로 설정하면 됩니다. 작은 점의 개수를 알 수 없으므로 ol의 너비도 알 수 없기 때문에 작은 점 영역입니다. 너비를 알 수 없는 상자를 가로로 가운데에 배치하려면 absolute 위치는 <code>왼쪽 백분율과 결합됩니다. ;

    • ol 아래 li의 너비와 높이를 설정하고 둥근 테두리 속성을 추가합니다. 왼쪽으로 띄워서 빈 점 행을 표시할 수 있습니다.

js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)

마지막으로 스타일 클래스를 추가하고 그 안에 배경 속성을 설정하여 현재 표시된 이미지에 해당하는 작은 점을 표시합니다. 

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 <img src="https://img.php.cn//upload/image/819/348/133/js%EC%9D%98%20%EB%AA%A8%EB%B0%94%EC%9D%BC%20%EB%8B%A8%EB%A7%90%EA%B8%B0%EC%97%90%20Touch%20carousel%EC%9D%84%20%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%9D%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C?%20(%EC%BD%94%EB%93%9C%20%EC%98%88)" title="js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)" alt="js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)"    style="max-width:90%">🎜🎜4.js 준비🎜🎜먼저 다른 것을 고려하지 마세요. <code>js</code>가 초기화되면 가장 먼저 해야 할 일은 <code>ul입니다. 이전 높이를 추가하세요. 그렇지 않으면 이미지가 표시되지 않습니다. 🎜🎜🎜🎜 <code>UL</code>의 높이를 동적으로 설정 🎜🎜🎜🎜동적으로 작은 점 생성(사진 수에 따라 작은 점 수 생성, <code>i=0</code> 추가) <code>active</code>) 🎜🎜🎜🎜<code>li</code>🎜🎜<ul class=" list-paddingleft-2" style="list-style-type: square 3개의 기본 위치를 초기화합니다. ; ">🎜🎜3개의 <code>li</code>의 첨자를 저장하는 데 사용되는 3개의 변수를 정의합니다. (<code>left</code>는 마지막 그림인 <code>center의 첨자를 저장합니다. code > 및 <code>right</code>는 각각 첫 번째와 두 번째 그림의 아래 첨자를 저장합니다) 🎜🎜🎜🎜세 개의 <code>liarray[subscript]</code> /code> 위치를 설정한 후 <code>왼쪽</code> 방향🎜🎜🎜🎜<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;
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 🎜🎜🎜🎜🎜렌더링: 🎜🎜🎜🎜🎜🎜5. 타이머를 추가하여 사진을 움직이세요🎜🎜사진이 회전합니다. 자체적으로 회전 기능을 실행하려면 타이머를 사용해야 합니다. 🎜🎜🎜🎜타이머 추가, 타이머의 첨자 회전🎜🎜🎜🎜극단적 가치 판단🎜🎜🎜🎜전환 설정(대체 전환은 필요하지 않음)🎜🎜🎜🎜위치로 돌아가기🎜🎜🎜🎜작은 점 초점 연결 🎜🎜🎜rrreee🎜🎜🎜🎜🎜렌더링: 🎜🎜<p style="text-align: center;"><img src="https://img.php.cn//upload/image/742/369/156/js%EC%9D%98%20%EB%AA%A8%EB%B0%94%EC%9D%BC%20%EB%8B%A8%EB%A7%90%EA%B8%B0%EC%97%90%20Touch%20carousel%EC%9D%84%20%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%9D%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C?%20(%EC%BD%94%EB%93%9C%20%EC%98%88)" title="js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)" alt="js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)"    style="max-width:90%"  style="max-width:90%"></p><h3>6. touch 滑动</h3><blockquote>移动端的轮播图，配合<code>touch</code>滑动事件，效果更加友好。</blockquote>
로그인 후 복사

  • 分别绑定三个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%EC%9D%98%20%EB%AA%A8%EB%B0%94%EC%9D%BC%20%EB%8B%A8%EB%A7%90%EA%B8%B0%EC%97%90%20Touch%20carousel%EC%9D%84%20%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%9D%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C?%20(%EC%BD%94%EB%93%9C%20%EC%98%88)" title="js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)" alt="js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)"    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%EC%9D%98%20%EB%AA%A8%EB%B0%94%EC%9D%BC%20%EB%8B%A8%EB%A7%90%EA%B8%B0%EC%97%90%20Touch%20carousel%EC%9D%84%20%EA%B5%AC%ED%98%84%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95%EC%9D%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C?%20(%EC%BD%94%EB%93%9C%20%EC%98%88)" title="js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)" alt="js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)"    style="max-width:90%"  style="max-width:90%"></p><p>以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！</p>
로그인 후 복사

위 내용은 js의 모바일 단말기에 Touch carousel을 구현하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
html5 javascript 회전목마
원천：segmentfault.com
이전 기사：Node.js를 사용하여 CSV 파일을 처리하는 방법 다음 기사：jsonp는 도메인 전체에서 데이터를 어떻게 얻나요? (코드 예)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
CSS 행 클래스는 특정 요소를 프레임 밖으로 내보내는 동시에 정적이고 디스플레이 하단에 고정되어야 합니다. 현재 내 페이지는 다음과 같습니다. 두 요소가 서로 옆에 있도록 행 클래스를 추가한 후 하단 탐색 모음이 스크롤해야 하는 위치로 푸시됩니다. 여기에서 행 요소가 ...
에서 2024-04-03 18:48:12
0
1
281
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿