当前位置：首页 > JavaScript

js实现滑动相册

2026-04-04 16:10:34JavaScript

实现滑动相册的步骤

使用JavaScript实现滑动相册可以通过监听触摸事件或鼠标事件来实现。以下是两种常见的方法：

方法一：基于触摸事件的滑动相册

监听touchstart、touchmove和touchend事件，计算滑动距离并触发相册切换。

js实现滑动相册

const slider = document.querySelector('.slider');
let startX, moveX;

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

slider.addEventListener('touchmove', (e) => {
    moveX = e.touches[0].clientX;
    const diff = startX - moveX;
    if (diff > 50) {
        // 向右滑动，切换到下一张
        nextSlide();
    } else if (diff < -50) {
        // 向左滑动，切换到上一张
        prevSlide();
    }
});

function nextSlide() {
    // 实现切换到下一张的逻辑
}

function prevSlide() {
    // 实现切换到上一张的逻辑
}

方法二：基于鼠标拖拽的滑动相册

监听mousedown、mousemove和mouseup事件，实现类似触摸滑动的效果。

js实现滑动相册

const slider = document.querySelector('.slider');
let isDragging = false;
let startX, currentX;

slider.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.clientX;
});

slider.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    currentX = e.clientX;
    const diff = startX - currentX;
    if (diff > 50) {
        nextSlide();
        isDragging = false;
    } else if (diff < -50) {
        prevSlide();
        isDragging = false;
    }
});

slider.addEventListener('mouseup', () => {
    isDragging = false;
});

使用CSS过渡效果

为相册添加平滑的滑动过渡效果，可以通过CSS的transform和transition属性实现。

.slider {
    display: flex;
    transition: transform 0.3s ease;
}

.slide {
    min-width: 100%;
}

完整示例代码

结合HTML、CSS和JavaScript的完整滑动相册实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动相册</title>
    <style>
        .slider-container {
            width: 100%;
            overflow: hidden;
        }
        .slider {
            display: flex;
            transition: transform 0.3s ease;
        }
        .slide {
            min-width: 100%;
            height: 300px;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <div class="slider-container">
        <div class="slider">
            <div class="slide" style="background-image: url('image1.jpg');"></div>
            <div class="slide" style="background-image: url('image2.jpg');"></div>
            <div class="slide" style="background-image: url('image3.jpg');"></div>
        </div>
    </div>

    <script>
        const slider = document.querySelector('.slider');
        let currentIndex = 0;
        let startX, moveX;

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

        slider.addEventListener('touchmove', (e) => {
            moveX = e.touches[0].clientX;
            const diff = startX - moveX;
            if (diff > 50) {
                nextSlide();
            } else if (diff < -50) {
                prevSlide();
            }
        });

        function nextSlide() {
            if (currentIndex < slider.children.length - 1) {
                currentIndex++;
                updateSlider();
            }
        }

        function prevSlide() {
            if (currentIndex > 0) {
                currentIndex--;
                updateSlider();
            }
        }

        function updateSlider() {
            slider.style.transform = `translateX(-${currentIndex * 100}%)`;
        }
    </script>
</body>
</html>