js+触摸屏滑动

在JavaScript中实现触摸屏滑动功能，通常涉及到触摸事件（touchstart、touchmove、touchend）的监听和处理。以下是基础概念及相关实现细节：

基础概念

触摸事件：
- touchstart：当手指触摸屏幕时触发。
- touchmove：当手指在屏幕上滑动时触发。
- touchend：当手指离开屏幕时触发。

触摸事件对象：
- touches：当前屏幕上所有触摸点的集合。
- targetTouches：当前目标元素上所有触摸点的集合。
- changedTouches：自上次触摸事件以来发生变化的触摸点的集合。

实现滑动功能

以下是一个简单的示例代码，展示如何实现一个基本的左右滑动切换图片的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Touch Slider</title>
    <style>
        #slider {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        #slider img {
            width: 100%;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
        }
        #slider img.active {
            display: block;
        }
    </style>
</head>
<body>
    <div id="slider">
        <img src="image1.jpg" alt="Image 1" class="active">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>

    <script>
        const slider = document.getElementById('slider');
        let startX = 0;
        let currentTranslate = 0;
        let prevTranslate = 0;
        let isDragging = false;

        slider.addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
            isDragging = true;
        });

        slider.addEventListener('touchmove', (e) => {
            if (!isDragging) return;
            const currentX = e.touches[0].clientX;
            const diff = currentX - startX;
            currentTranslate = prevTranslate + diff;
            setSliderPosition();
        });

        slider.addEventListener('touchend', (e) => {
            if (!isDragging) return;
            const movedBy = currentTranslate - prevTranslate;
            if (movedBy < -100 && !slider.lastImageActive) {
                slideToNextImage();
            } else if (movedBy > 100 && !slider.firstImageActive) {
                slideToPrevImage();
            }
            resetPosition();
        });

        function setSliderPosition() {
            slider.style.transform = `translateX(${currentTranslate}px)`;
        }

        function slideToNextImage() {
            const activeImg = document.querySelector('#slider img.active');
            const nextImg = activeImg.nextElementSibling || document.querySelector('#slider img:first-child');
            activeImg.classList.remove('active');
            nextImg.classList.add('active');
            prevTranslate -= slider.offsetWidth;
            setSliderPosition();
        }

        function slideToPrevImage() {
            const activeImg = document.querySelector('#slider img.active');
            const prevImg = activeImg.previousElementSibling || document.querySelector('#slider img:last-child');
            activeImg.classList.remove('active');
            prevImg.classList.add('active');
            prevTranslate += slider.offsetWidth;
            setSliderPosition();
        }

        function resetPosition() {
            isDragging = false;
            currentTranslate = prevTranslate;
            setSliderPosition();
        }
    </script>
</body>
</html>