How to implement Touch carousel on mobile terminal in js? (code example)

The content of this article is to introduce the method of realizing the Touch carousel chart on the mobile terminal with js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Touch carousel chart

touchThe carousel chart actually switches the carousel chart left and right by sliding your finger. Below we will use a case to implement it.

1. html structure

Structurally, we still use ul, li to store carousel images, ol, li to store carousel dots:

2. Some tags of style initialization

html , there will be some default styles. For example, the body tag has a margin by default. In order not to affect the appearance, we need to clear it out.

/* 清除标签默认边距 */
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图片缩放失真*/
}

3. Add style

When we talked about special effects earlier, we talked about how to use native js to move a wheel The concept of broadcasting pictures, but the method at that time was to float through li. Here I would like to introduce a new method to you - positioning.

Idea:

• Give ul the outer box a relative positioning;

• The height of ul here cannot be hard-coded. It should be the height of li, but due to the absolute positioning of li, there is no way to expand this. Height, so ul here needs to dynamically set the height in js;

• sets relative positioning for li, And left, top are both 0, and then add a transform:translateX(300%) to li Attribute, the purpose is to initialize the displayed image to be empty, and then only need to dynamically set the translateX value of each li in js to achieve carousel;

• Set the small dot area. Because the number of small dots is unknown, the width of ol is also unknown. If you want to center a box with an unknown width horizontally, It can be achieved by using absolute positioning combined with left percentage;

• gives ol the following liSet a width and height and add a rounded border attribute, and float it to the left, so that a row of hollow dots can be displayed;

• Finally, add a style class inside Set a background attribute to display the small dots corresponding to the currently displayed image.

/* 轮播图最外层盒子 */
.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 preparation work

Don’t consider anything else first, jsduring initialization , the first thing to do is to add a height to ul, otherwise the picture will not be displayed.

• Dynamically set the height for UL

• Dynamically generate small dots (create small dots based on the number of pictures Number, i=0 Add active)

• Initialize the basic positions of three li

• Define three variables, which are used to store the subscripts of three li (left stores the subscript of the last picture, center and right store the subscripts of the first and second pictures respectively)

• through array [subscript] The way to set the position of the three li in the left direction

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 <p style="text-align: center;"><img src="https://img.php.cn//upload/image/588/479/428/How%20to%20implement%20Touch%20carousel%20on%20mobile%20terminal%20in%20js?%20(code%20example)?x-oss-process=image/resize,p_40" title="How to implement Touch carousel on mobile terminal in js? (code example)" alt="How to implement Touch carousel on mobile terminal in js? (code example)"    style="max-width:90%"  style="max-width:90%"></p><p>##Rendering: <strong></strong></p><p style="text-align: center;"><img src="https://img.php.cn//upload/image/609/739/253/How%20to%20implement%20Touch%20carousel%20on%20mobile%20terminal%20in%20js?%20(code%20example)?x-oss-process=image/resize,p_40" title="How to implement Touch carousel on mobile terminal in js? (code example)" alt="How to implement Touch carousel on mobile terminal in js? (code example)"    style="max-width:90%"  style="max-width:90%"></p>5. Add a timer to make the pictures move<h3></h3>The carousel pictures will rotate by themselves, so you need Use a timer to execute a rotation function every once in a while. <blockquote></blockquote>

• Add a timer and rotate the subscript in the timer

• Extreme value judgment

• Settings Transition (the substitute does not need to transition)

• Return

• Small dot focus linkage

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 <p style="text-align: center;"><img src="https://img.php.cn//upload/image/903/520/594/How%20to%20implement%20Touch%20carousel%20on%20mobile%20terminal%20in%20js?%20(code%20example)?x-oss-process=image/resize,p_40" title="How to implement Touch carousel on mobile terminal in js? (code example)" alt="How to implement Touch carousel on mobile terminal in js? (code example)"    style="max-width:90%"  style="max-width:90%"></p><p>Rendering: <strong></strong></p><p style="text-align: center;"><img src="https://img.php.cn//upload/image/742/369/156/How%20to%20implement%20Touch%20carousel%20on%20mobile%20terminal%20in%20js?%20(code%20example)?x-oss-process=image/resize,p_40" title="How to implement Touch carousel on mobile terminal in js? (code example)" alt="How to implement Touch carousel on mobile terminal in js? (code example)"    style="max-width:90%"  style="max-width:90%"></p><h3 id="touch-滑动">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/How%20to%20implement%20Touch%20carousel%20on%20mobile%20terminal%20in%20js?%20(code%20example)?x-oss-process=image/resize,p_40" title="How to implement Touch carousel on mobile terminal in js? (code example)" alt="How to implement Touch carousel on mobile terminal in js? (code example)"    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/How%20to%20implement%20Touch%20carousel%20on%20mobile%20terminal%20in%20js?%20(code%20example)?x-oss-process=image/resize,p_40" title="How to implement Touch carousel on mobile terminal in js? (code example)" alt="How to implement Touch carousel on mobile terminal in js? (code example)"    style="max-width:90%"  style="max-width:90%"></p><p>以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！</p>

The above is the detailed content of How to implement Touch carousel on mobile terminal in js? (code example). For more information, please follow other related articles on the PHP Chinese website!