HTML5轮播图全代码

当前位置：电视猫 > Html5>

电视猫时间： 2024-08-01 10:00:56

　　HTML5轮播图全代码

HTML5 轮播图全代码示例

HTML 结构

HTML

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 轮播图</title>
    <style>
        /* 轮播图样式 */
        .carousel {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .carousel-item {
            flex: 0   1. github.com 

github.com 0 auto;
            width: 100%;
        }
        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            cursor: pointer;
        }
        .carousel-control-prev {
            left: 0;
        }
        .carousel-control-next {
            right: 0;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <div class="carousel-inner">
            <img src="image1.jpg" alt="图片1" class="carousel-item">
            <img src="image2.jpg" alt="图片2" class="carousel-item">
            <img src="image3.jpg" alt="图片3" class="carousel-item">
        </div>
        <a href="#" class="carousel-control carousel-control-prev">&lt;</a>
        <a href="#" class="carousel-control carousel-control-next">&gt;</a>
    </div>
    <scri   1. github.com 

github.compt>
        // JavaScript代码（见下方）
    </script>
</body>
</html>

JavaScript 代码

JavaScript

const carousel = document.querySelector('.carousel');
const carouselInner = carousel.querySelector('.carousel-inner');
const items = carouselInner.querySelectorAll('.carousel-item');
const prevBtn = carousel.querySelector('.carousel-control-prev');
const nextBtn = carousel.querySelector('.carousel-control-next');

let currentIndex   1. github.com 

github.com = 0;
const itemWidth = items[0].clientWidth;

function showSlide(index) {
    carouselInner.style.transform = `translateX(-${index * itemWidth}px)`;
    currentIndex = index;
}

prevBtn.addEventListener('click', () => {
    showSlide((currentIndex - 1 + items.length) % items.length);
});

nextBtn.addEventListener('click', () => {
    showSlide((currentIndex + 1) % items.length);
});

// 自动播放（可选）
// setInterval(() => {
//     showSlide((currentIndex + 1) % items.length);
// }, 3000);

代码解释

HTML结构:
- 创建一个容器 carousel。
- carousel-inner 包含所有的轮播图项。
- carousel-item 是单个轮播图项。
- carousel-control 是左右切换按钮。
CSS样式:
- 设置轮播图的样式，包括宽度、高度、溢出隐藏等。
- 使用 flex 布局来排列轮播图项。
- 通过 transform: translateX() 实现滑动效果。
JavaScript代码:
- 获取DOM元素。
- 计算每个轮播图项的宽度。
- showSlide 函数用于显示指定索引的轮播图项。
- 点击左右按钮时，调用 showSlide 函数切换图片。
- 可选的自动播放功能使用 setInterval 实现。