css轮播图

作者：魔影杀戮发布日期:2025-07-22 浏览:86

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS轮播图</title>
    <style>
        /* 设置轮播图容器 */
        .carousel {
            width: 600px;
            height: 400px;
            position: relative;
            overflow: hidden;
        }

        /* 设置图片列表 */
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        /* 每张图片 */
        .carousel-item {
            min-width: 100%;
            height: 100%;
        }

        /* 图片上的文字说明 */
        .carousel-caption {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            text-align: center;
        }

        /* 控制按钮样式 */
        .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" id="carousel">
    <div class="carousel-inner">
        <div class="carousel-item">
            <img src="https://via.placeholder.com/600x400?text=Slide+1" alt="Slide 1">
            <div class="carousel-caption">Slide 1 Caption</div>
        </div>
        <div class="carousel-item">
            <img src="https://via.placeholder.com/600x400?text=Slide+2" alt="Slide 2">
            <div class="carousel-caption">Slide 2 Caption</div>
        </div>
        <div class="carousel-item">
            <img src="https://via.placeholder.com/600x400?text=Slide+3" alt="Slide 3">
            <div class="carousel-caption">Slide 3 Caption</div>
        </div>
    </div>
    <button class="carousel-control prev" onclick="prevSlide()">&#10094;</button>
    <button class="carousel-control next" onclick="nextSlide()">&#10095;</button>
</div>

<script>
    let currentIndex = 0;
    const slides = document.querySelectorAll('.carousel-item');
    const totalSlides = slides.length;

    function showSlide(index) {
        if (index >= totalSlides) {
            currentIndex = 0;
        } else if (index < 0) {
            currentIndex = totalSlides - 1;
        } else {
            currentIndex = index;
        }
        const offset = -currentIndex * 100;
        document.querySelector('.carousel-inner').style.transform = `translateX(${offset}%)`;
    }

    function nextSlide() {
        showSlide(currentIndex + 1);
    }

    function prevSlide() {
        showSlide(currentIndex - 1);
    }

    // 初始化显示第一张图片
    showSlide(0);
</script>

</body>
</html>

解释说明：

HTML结构：
- 使用了<div>元素来创建轮播图的容器和内部的内容。
- 每个<div class="carousel-item">包含一张图片和一个可选的标题（<div class="carousel-caption">）。
- 添加了两个按钮用于控制轮播图的切换。
CSS样式：
- .carousel：设置轮播图容器的宽度、高度以及隐藏溢出内容。
- .carousel-inner：使用flex布局将所有图片横向排列，并添加平滑过渡效果。
- .carousel-item：确保每张图片占满整个轮播图容器。
- .carousel-caption：为每张图片添加文字说明，位置固定在底部。
- .carousel-control：定义左右切换按钮的样式和位置。
JavaScript逻辑：
- 使用showSlide函数根据当前索引调整图片的位置。
- nextSlide和prevSlide函数分别用于点击按钮时切换到下一张或上一张图片。
- 初始状态下显示第一张图片。

上一篇：css 设置透明度

下一篇：css左对齐