3、js原生实现移动端手指滑动轮播图效果(3)

最新推荐文章于 2024-06-10 21:52:46 发布

原创最新推荐文章于 2024-06-10 21:52:46 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何使用原生JavaScript实现移动端的触摸滑动轮播图效果，包括HTML结构搭建、CSS样式设置及JavaScript触控事件处理等关键技术点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>3、js原生实现移动端手指滑动轮播图效果(3)</title>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            width: 100%;
        }

        ul, ol {
            list-style: none;
        }

        /*清除浮动*/

        .box{
            height: 50vh;
            width: 100vw;
            background: red;
        }
        .box1{
            background: yellow;
        }
        .box2{
            background: yellowgreen;
        }
        .box3{
            background: cyan;
        }
        .box4{
            background: orange;
        }
        /*轮播图*/
        .banner{
            position: relative;
            top: 10vh;
            width: 100vw;
            height: 100%;
            overflow: hidden;
        }
        .li{
            position: absolute;
            left: 0;
            top:0;
        }
        .li:nth-of-type(1){
            left:0;
        }
        .li:nth-of-type(2){
            left:375px;
        }

        .li:nth-of-type(3){
            left:700px;
        }

        .li:nth-of-type(4){
            left:1075px;
        }

    </style>
</head>
<body>
<div class="banner">
    <ul class="ul1">
        <li class="li">
            <div class="box box1">1111</div>
        </li>
        <li class="li">
            <div class="box box2">2222</div>
        </li class="li">
        <li class="li">
            <div class="box box3">3333</div>
        </li>
        <li class="li">
            <div class="box box4">444</div>
        </li>
    </ul>
</div>
</body>
</html>
<script>
    var banner = document.querySelector('.banner');
    var width = banner.offsetWidth;
    var ul1Node = banner.querySelector('.ul1');
    var liNode = document.querySelectorAll('.li');
    var liLength = liNode.length;

    var startX = 0;//开始坐标
    var moveX = 0;//移动时x的坐标
    var distancex = 0;//移动距离
    var isMove = false;//是否滑动过

    var index = 0;//当前图片索引


    banner.addEventListener('touchstart',(e) => {
        startX = e.touches[0].clientX;
    })
    banner.addEventListener('touchmove',(e) => {
        moveX = e.touches[0].clientX;
        distancex = moveX - startX;
        translateX(ul1Node,-index * width + distancex);
    })
    banner.addEventListener('touchend',(e) => {
        if( Math.abs(distancex) > (width/2) ){
            if (distancex > 0) {
                if(index >= 1){
                    index --;
                }else{
                    index = 0
                }
            } else {
                if(index < liLength-1){
                    index ++;
                }else{
                    index =liLength-1
                }
            }
            addTransition();
            translateX(ul1Node,-index * width);
        }else {
            addTransition();
            translateX(ul1Node,-index * width);
        }
        console.log(index);
    })
    /*公用方法*/
    //添加过渡
    var addTransition = function () {
        ul1Node.style.webkitTransition = 'all .2s ';
        ul1Node.style.transition = "all .2s";
    }
    //删除过渡
    var removeTransition = function () {
        ul1Node.style.webkitTransition = 'none';
        ul1Node.style.transition = "none";
    }
    // 设置定位
    var translateX = function (ul1Node,x) {
        ul1Node.style.webkitTransform = 'translateX(' + x + 'px)';
        ul1Node.style.transform = 'translateX(' + x + 'px)';
    }

</script>