下面是一个手把手用 原生 JavaScript 编写的简单轮播图示例。我们将使用 HTML、CSS 和 JavaScript 来实现一个基本的轮播图功能。

1. HTML 结构

首先，我们需要定义一个简单的 HTML 结构，包含图片和控制按钮。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单轮播图</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="carousel">
        <div class="carousel-images">
            <img src="https://via.placeholder.com/800x400?text=Image+1" alt="Image 1">
            <img src="https://via.placeholder.com/800x400?text=Image+2" alt="Image 2">
            <img src="https://via.placeholder.com/800x400?text=Image+3" alt="Image 3">
        </div>
        <button class="prev" onclick="moveSlide(-1)">❮</button>
        <button class="next" onclick="moveSlide(1)">❯</button>
    </div>

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

2. CSS 样式

接着，我们为轮播图添加一些样式，使其外观更好。

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.carousel {
    position: relative;
    width: 80%;
    margin: auto;
    overflow: hidden;
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-images img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

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

button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

3. JavaScript 功能

最后，添加 JavaScript 代码来实现轮播图的切换效果。

// script.js
let currentIndex = 0;

const slides = document.querySelectorAll(".carousel-images img");
const totalSlides = slides.length;

function moveSlide(step) {
    currentIndex += step;

    if (currentIndex < 0) {
        currentIndex = totalSlides - 1;  // 如果当前是第一个图片，点击左箭头回到最后一张
    } else if (currentIndex >= totalSlides) {
        currentIndex = 0;  // 如果当前是最后一张图片，点击右箭头回到第一张
    }

    const newTransformValue = -currentIndex * 100;  // 通过改变transform属性来切换图片
    document.querySelector(".carousel-images").style.transform = `translateX(${newTransformValue}%)`;
}

// 可选：自动轮播
setInterval(() => {
    moveSlide(1);  // 每隔5秒自动切换一张图片
}, 5000);

解释：

  1. HTML 结构：
    • 一个 .carousel 容器包含轮播的图片和两个按钮（左箭头和右箭头）。
    • .carousel-images 是一个包含所有图片的容器，它的 display 设置为 flex，使图片水平排列。
  2. CSS 样式：
    • 为了让轮播图显示为横向滚动，.carousel-images 使用了 flex 布局。
    • .carousel 设置了 overflow: hidden，确保只有一张图片在视图中显示，其他的图片会被隐藏。
    • button 元素用于控制图片切换，它们通过 position: absolute 定位到轮播图的两边。
  3. JavaScript 功能：
    • moveSlide(step) 函数通过修改 .carousel-images 的 transform 属性来切换图片。
    • setInterval 用于实现自动轮播，每5秒自动切换一张图片。

4. 效果演示

  • 当你点击左箭头按钮时，轮播图会向左切换图片。
  • 当你点击右箭头按钮时，轮播图会向右切换图片。
  • 如果你没有点击按钮，图片会每5秒自动切换一次。

5. 扩展功能（可选）

你可以根据需要对轮播图进行进一步的优化：

  • 添加过渡效果：在切换图片时添加更流畅的过渡效果，比如淡入淡出。
  • 轮播指示器：在底部添加一些圆点或数字，表示当前显示的是哪张图片。
  • 暂停/继续功能：添加暂停按钮或滑动鼠标悬停时停止自动轮播的功能。

这个轮播图使用了原生的 JavaScript 和 CSS 实现，避免了使用外部库和框架，适合一些简单的应用场景。希望对你有帮助！