js实现页面左右滑动效果代码

要实现页面的左右滑动效果，可以使用JavaScript结合CSS来完成。以下是一个简单的示例，展示了如何实现这一效果：

基础概念

页面左右滑动效果通常涉及以下几个概念：

CSS过渡（Transitions）：用于平滑地改变元素的CSS属性。
JavaScript事件处理：用于监听用户的交互行为，如点击或触摸事件。
DOM操作：用于动态修改页面内容和样式。

示例代码

以下是一个简单的示例，展示了如何使用JavaScript和CSS实现页面左右滑动效果：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Slider</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slider-container">
        <div class="slide" id="slide1">Slide 1</div>
        <div class="slide" id="slide2">Slide 2</div>
        <div class="slide" id="slide3">Slide 3</div>
    </div>
    <button onclick="prevSlide()">Previous</button>
    <button onclick="nextSlide()">Next</button>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

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

.slide {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: white;
    position: absolute;
    transition: transform 0.5s ease-in-out;
}

#slide1 { background-color: #3498db; }
#slide2 { background-color: #2ecc71; }
#slide3 { background-color: #e74c3c; }

.slide:nth-child(1) { transform: translateX(0); }
.slide:nth-child(2) { transform: translateX(100%); }
.slide:nth-child(3) { transform: translateX(200%); }

JavaScript逻辑

// script.js
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');

function showSlide(index) {
    slides.forEach((slide, i) => {
        slide.style.transform = `translateX(${(i - index) * 100}%)`;
    });
}

function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    showSlide(currentSlide);
}

function prevSlide() {
    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
    showSlide(currentSlide);
}