实现一个简单的轮播图 (Carousel)

推荐答案

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Carousel</title>
    <style>
        .carousel {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin: auto;
            overflow: hidden;
        }
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .carousel-item {
            min-width: 100%;
            box-sizing: border-box;
        }
        .carousel-item img {
            width: 100%;
            display: block;
        }
        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }
        .carousel-control.prev {
            left: 10px;
        }
        .carousel-control.next {
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <div class="carousel-inner">
            <div class="carousel-item">
                <img src="image1.jpg" alt="Image 1">
            </div>
            <div class="carousel-item">
                <img src="image2.jpg" alt="Image 2">
            </div>
            <div class="carousel-item">
                <img src="image3.jpg" alt="Image 3">
            </div>
        </div>
        <button class="carousel-control prev">&#10094;</button>
        <button class="carousel-control next">&#10095;</button>
    </div>

    <script>
        const carouselInner = document.querySelector('.carousel-inner');
        const items = document.querySelectorAll('.carousel-item');
        const prevButton = document.querySelector('.carousel-control.prev');
        const nextButton = document.querySelector('.carousel-control.next');
        let currentIndex = 0;

        function updateCarousel() {
            const offset = -currentIndex * 100;
            carouselInner.style.transform = `translateX(${offset}%)`;
        }

        prevButton.addEventListener('click', () => {
            currentIndex = (currentIndex > 0) ? currentIndex - 1 : items.length - 1;
            updateCarousel();
        });

        nextButton.addEventListener('click', () => {
            currentIndex = (currentIndex < items.length - 1) ? currentIndex + 1 : 0;
            updateCarousel();
        });

        updateCarousel();
    </script>
</body>
</html>

本题详细解读

1. HTML 结构

• <div class="carousel">: 这是轮播图的外层容器，用于包裹整个轮播图的内容。
• <div class="carousel-inner">: 这是轮播图的内层容器，包含所有的轮播项（carousel-item）。通过 flex 布局，所有的轮播项会水平排列。
• <div class="carousel-item">: 每个轮播项包含一张图片，图片通过 img 标签引入。
• <button class="carousel-control prev"> 和 <button class="carousel-control next">: 这两个按钮分别用于控制轮播图的前进和后退。

2. CSS 样式

• .carousel: 设置了轮播图的外层容器的宽度、最大宽度、居中对齐以及溢出隐藏。
• .carousel-inner: 使用 flex 布局，使得所有的轮播项水平排列。transition 属性用于实现平滑的切换效果。
• .carousel-item: 每个轮播项的宽度设置为 100%，确保每次只显示一个轮播项。
• .carousel-control: 控制按钮的样式，包括位置、背景颜色、字体颜色等。

3. JavaScript 逻辑

• currentIndex: 用于记录当前显示的轮播项的索引。
• updateCarousel(): 根据 currentIndex 的值，计算 carousel-inner 的 transform 属性，实现轮播项的切换。
• prevButton.addEventListener('click', ...): 当点击“上一个”按钮时，currentIndex 减 1，如果已经是第一个轮播项，则跳转到最后一个轮播项。
• nextButton.addEventListener('click', ...): 当点击“下一个”按钮时，currentIndex 加 1，如果已经是最后一个轮播项，则跳转到第一个轮播项。

4. 总结

这个简单的轮播图实现通过 HTML、CSS 和 JavaScript 的配合，实现了基本的轮播功能。通过 flex 布局和 transform 属性，轮播项的切换效果非常平滑。控制按钮的点击事件则实现了轮播图的前进和后退功能。