js图片鼠标左右滑动效果代码

要实现JavaScript中的图片鼠标左右滑动效果，你需要了解以下基础概念：

基础概念

DOM操作：JavaScript可以操作HTML文档对象模型（DOM），从而改变网页的内容和结构。
事件监听：通过监听鼠标事件（如mousedown、mousemove、mouseup），可以实现用户交互。
CSS样式：使用CSS来控制图片的位置和过渡效果。

实现步骤

HTML结构：创建一个容器来包含图片，并设置图片的初始位置。
CSS样式：定义图片容器的样式，包括宽度、溢出隐藏等。
JavaScript逻辑：编写脚本来监听鼠标事件，并根据鼠标的移动来调整图片的位置。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Slider</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slider-container">
        <img src="image1.jpg" alt="Image 1" class="slider-image">
        <img src="image2.jpg" alt="Image 2" class="slider-image">
        <img src="image3.jpg" alt="Image 3" class="slider-image">
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slider-image {
    width: 100%;
    display: block;
    transition: transform 0.3s ease-in-out;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.slider-container');
    const images = document.querySelectorAll('.slider-image');
    let startX = 0;
    let currentTranslate = 0;
    let prevTranslate = 0;
    let animationID = 0;
    let currentIndex = 0;

    container.addEventListener('mousedown', dragStart);
    container.addEventListener('mouseup', dragEnd);
    container.addEventListener('mouseleave', dragEnd);
    container.addEventListener('mousemove', drag);

    function dragStart(event) {
        startX = event.clientX;
        animationID = requestAnimationFrame(animation);
    }

    function dragEnd() {
        cancelAnimationFrame(animationID);
        const movedBy = currentTranslate - prevTranslate;

        if (movedBy < -100 && currentIndex < images.length - 1) currentIndex += 1;
        if (movedBy > 100 && currentIndex > 0) currentIndex -= 1;

        setSliderPosition();
    }

    function drag(event) {
        const currentPosition = event.clientX;
        currentTranslate = prevTranslate + currentPosition - startX;
    }

    function animation() {
        setSliderPosition();
        if (isDragging) requestAnimationFrame(animation);
    }

    function setSliderPosition() {
        const offset = -currentIndex * 100 + '%';
        container.style.transform = `translateX(${currentTranslate}px)`;
    }
});