html轮播图

作者：不，完美发布日期:2025-09-22 浏览:90

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

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

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

        /* 设置左右箭头样式 */
        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }

        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        .prev:hover, .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
    </style>
</head>
<body>

<div class="carousel">
    <div class="carousel-inner" id="carouselInner">
        <div class="carousel-item">
            <img src="https://via.placeholder.com/600x400?text=Slide+1" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="https://via.placeholder.com/600x400?text=Slide+2" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="https://via.placeholder.com/600x400?text=Slide+3" alt="Slide 3">
        </div>
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<script>
    let slideIndex = 0;
    showSlides();

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function showSlides(n) {
        const slides = document.querySelectorAll('.carousel-item');
        if (n >= slides.length) { slideIndex = 0 }
        if (n < 0) { slideIndex = slides.length - 1 }
        slides.forEach((slide, index) => {
            slide.style.transform = `translateX(${(index - slideIndex) * 100}%)`;
        });
    }
</script>

</body>
</html>

解释说明：

HTML部分：
- 创建了一个包含图片的轮播图容器 .carousel。
- 每个图片项放在一个 .carousel-item 容器中，所有图片项都放在 .carousel-inner 容器内。
- 添加了左右箭头按钮，用于切换图片。
CSS部分：
- 设置了轮播图容器和图片的样式，确保图片可以水平排列，并且超出部分会被隐藏。
- 设置了左右箭头的样式，使其在鼠标悬停时有背景颜色变化效果。
JavaScript部分：
- 使用 showSlides 函数控制图片的显示和切换逻辑。
- plusSlides 函数用于根据用户点击的方向（左或右）更新当前显示的图片索引。
- transform 属性用于实现图片的平滑过渡效果。

上一篇：html文件怎么创建

下一篇：html5的doctype