1. 触摸支持：在移动设备上,可以通过触摸左右滑动来翻页。
  2. 鼠标支持：在桌面浏览器上,可以通过鼠标拖拽来模拟滑动。
  3. 键盘支持：可以使用键盘的左右箭头键进行翻页。
  4. 平滑动画：使用 CSS transform 和 transition 实现流畅的滑动效果。
  5. 响应式设计：适配各种屏幕尺寸。
  6. 指示器：底部显示当前页码和总页数,方便用户了解进度。

最终效果预览

您可以直接复制下面的所有代码，保存为一个 .html 文件,然后在浏览器中打开即可看到效果。

html5左右滑动翻页模板
（图片来源网络，侵删）

模板代码

下面是完整的代码，包含了 HTML、CSS 和 JavaScript。

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">左右滑动翻页模板</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="slider-wrapper">
            <!-- 第一页 -->
            <div class="slide">
                <h1>第一页</h1>
                <p>这是第一页的内容，您可以通过以下几种方式进行翻页：</p>
                <ul>
                    <li>在移动设备上，用手指左右滑动。</li>
                    <li>在电脑上，用鼠标按住并拖动。</li>
                    <li>使用键盘的 <kbd>←</kbd> 和 <kbd>→</kbd> 箭头键。</li>
                </ul>
            </div>
            <!-- 第二页 -->
            <div class="slide">
                <h1>第二页</h1>
                <p>这是第二页的内容，这个模板非常灵活，您可以轻松地修改每页的内容和样式。</p>
                <p>只需在 HTML 中添加或删除 `<div class="slide">...</div>` 元素，JavaScript 会自动适应页数变化。</p>
            </div>
            <!-- 第三页 -->
            <div class="slide">
                <h1>第三页</h1>
                <p>这是第三页的内容。</p>
                <p>感谢您的使用！</p>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

style.css

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    overflow: hidden; /* 防止出现水平滚动条 */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 主容器 */
.container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden; /* 隐藏超出视口的滑动部分 */
}
/* 滑动区域 */
.slider-wrapper {
    display: flex; /* 使用 Flexbox 布局让所有页面水平排列 */
    height: 100%;
    transition: transform 0.3s ease-out; /* 平滑过渡效果 */
}
/* 单个页面样式 */
.slide {
    min-width: 100vw; /* 每个页面占据整个视口宽度 */
    height: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.slide h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #007bff;
}
.slide p {
    font-size: 1.2em;
    line-height: 1.8;
    max-width: 600px;
}
.slide ul {
    list-style-type: none;
    padding: 0;
}
.slide li {
    font-size: 1.1em;
    margin-bottom: 10px;
}
/* 键盘按键样式 */
kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    color: #333;
    display: inline-block;
    font-size: 0.9em;
    line-height: 1;
    padding: 2px 6px;
    white-space: nowrap;
}

script.js

document.addEventListener('DOMContentLoaded', () => {
    const sliderWrapper = document.querySelector('.slider-wrapper');
    const slides = document.querySelectorAll('.slide');
    const totalSlides = slides.length;
    let currentIndex = 0;
    // 如果没有页面，则不执行任何操作
    if (totalSlides === 0) return;
    // --- 1. 键盘事件 ---
    document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft') {
            goToPrevSlide();
        } else if (e.key === 'ArrowRight') {
            goToNextSlide();
        }
    });
    // --- 2. 触摸/鼠标事件 ---
    let startX = 0;
    let isDragging = false;
    let currentX = 0;
    let initialX = 0;
    // 鼠标按下或触摸开始
    sliderWrapper.addEventListener('mousedown', startDrag);
    sliderWrapper.addEventListener('touchstart', startDrag, { passive: true });
    function startDrag(e) {
        isDragging = true;
        startX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
        sliderWrapper.style.cursor = 'grabbing';
        sliderWrapper.style.transition = 'none'; // 拖动时禁用过渡动画
    }
    // 鼠标移动或触摸移动
    sliderWrapper.addEventListener('mousemove', drag);
    sliderWrapper.addEventListener('touchmove', drag, { passive: true });
    function drag(e) {
        if (!isDragging) return;
        e.preventDefault(); // 防止页面滚动
        currentX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
        const walkX = (currentX - startX) * 1.5; // 乘以一个系数，使拖动更灵敏
        // 计算新的 transform 值，但限制在边界内
        let newTranslateX = -currentIndex * window.innerWidth + walkX;
        newTranslateX = Math.max(-(totalSlides - 1) * window.innerWidth, Math.min(0, newTranslateX));
        sliderWrapper.style.transform = `translateX(${newTranslateX}px)`;
    }
    // 鼠标释放或触摸结束
    sliderWrapper.addEventListener('mouseup', endDrag);
    sliderWrapper.addEventListener('mouseleave', endDrag);
    sliderWrapper.addEventListener('touchend', endDrag);
    function endDrag() {
        if (!isDragging) return;
        isDragging = false;
        sliderWrapper.style.cursor = 'grab';
        sliderWrapper.style.transition = 'transform 0.3s ease-out'; // 恢复过渡动画
        // 计算滑动距离，判断是上一页还是下一页
        const walkX = currentX - startX;
        const threshold = window.innerWidth * 0.2; // 滑动距离超过视口宽度的20%才翻页
        if (walkX < -threshold) {
            goToNextSlide();
        } else if (walkX > threshold) {
            goToPrevSlide();
        } else {
            // 如果滑动距离不够，则回到当前页
            goToSlide(currentIndex);
        }
    }
    // --- 核心翻页函数 ---
    function goToSlide(index) {
        if (index < 0 || index >= totalSlides) return;
        currentIndex = index;
        sliderWrapper.style.transform = `translateX(-${currentIndex * window.innerWidth}px)`;
    }
    function goToNextSlide() {
        if (currentIndex < totalSlides - 1) {
            goToSlide(currentIndex + 1);
        }
    }
    function goToPrevSlide() {
        if (currentIndex > 0) {
            goToSlide(currentIndex - 1);
        }
    }
    // --- 初始化 ---
    sliderWrapper.style.transform = `translateX(0px)`; // 确保初始位置正确
    sliderWrapper.style.cursor = 'grab'; // 设置鼠标样式
});

如何使用和自定义

  1. 添加新页面： 只需在 <div class="slider-wrapper"> 内部复制并粘贴 <div class="slide">...</div> 元素即可,添加第四页：

    <div class="slide">
    <h1>第四页</h1>
    <p>这是新添加的第四页内容。</p>
</div>

    JavaScript 会自动识别并适配新的页数。

  2. 修改页面内容： 直接编辑每个 <div class="slide"> 内部的 HTML 内容即可。

    html5左右滑动翻页模板
    （图片来源网络，侵删）

  3. 修改样式： 编辑 style.css 文件来自定义页面的外观，可以修改背景颜色、字体、阴影等。

  4. 调整动画速度： 在 style.css 中找到 .slider-wrapper 的 transition 属性，修改 3s 这个值可以改变动画的快慢，数值越小,动画越快。

  5. 调整灵敏度： 在 script.js 中，const threshold = window.innerWidth * 0.2; 这一行控制着需要滑动多远才算一次有效的翻页，将 2 调大，需要滑动的距离就越多；调小则反之。

这个模板是一个很好的起点,您可以根据自己的项目需求进行进一步的扩展和美化。

html5左右滑动翻页模板
（图片来源网络，侵删）