js 页面左右滑动特效代码

要在网页中实现左右滑动特效，可以使用JavaScript结合CSS来完成。以下是一个简单的示例，展示如何使用原生JavaScript和CSS实现一个可左右滑动的图片轮播效果。

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>左右滑动特效</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slider-container">
        <button class="slider-button prev">←</button>
        <div class="slider">
            <img src="image1.jpg" alt="图片1">
            <img src="image2.jpg" alt="图片2">
            <img src="image3.jpg" alt="图片3">
        </div>
        <button class="slider-button next">→</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS样式 (`styles.css`)

.slider-container {
    position: relative;
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider img {
    width: 100%;
    flex-shrink: 0;
}

.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

JavaScript代码 (`script.js`)

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slider img');
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
let currentIndex = 0;
const slideWidth = slides[0].clientWidth;
const slideCount = slides.length;

function moveToSlide(index) {
    if (index < 0) {
        index = slideCount - 1;
    } else if (index >= slideCount) {
        index = 0;
    }
    currentIndex = index;
    const offset = -currentIndex * slideWidth;
    slider.style.transform = `translateX(${offset}px)`;
}

prevButton.addEventListener('click', () => {
    moveToSlide(currentIndex - 1);
});

nextButton.addEventListener('click', () => {
    moveToSlide(currentIndex + 1);
});

// 自动滑动（可选）
setInterval(() => {
    moveToSlide(currentIndex + 1);
}, 3000);

解释

HTML结构：
- .slider-container 是整个滑动组件的容器，设置了相对定位和溢出隐藏。
- .slider 是包含所有图片的容器，使用 flex 布局。
- .slider-button 是左右切换按钮，分别放置在容器的左右两侧。

CSS样式：
- .slider-container 设置了固定宽度和居中对齐，并隐藏溢出内容。
- .slider 使用 flex 布局，并添加了过渡效果。
- .slider img 设置图片宽度为100%，并防止收缩。
- .slider-button 设置按钮的样式和位置。
JavaScript代码：
- 获取滑动容器、图片和按钮的引用。
- 计算每张图片的宽度和总图片数。
- moveToSlide 函数用于移动到指定索引的图片，并处理边界情况。
- 为左右按钮添加点击事件监听器，调用 moveToSlide 函数。
- 可选地，添加自动滑动功能。