包含自动轮播、点击切换、显示图片信息和页码方框显示码数的 HTML 和 JavaScript 示例：

news2024/9/22 19:42:18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        #carousel-container {
            position: relative;
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        #carousel {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .carousel-item {
            min-width: 100%;
            box-sizing: border-box;
            position: relative;
        }

        .carousel-item img {
            width: 100%;
            height: auto;
        }

        .carousel-item p {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            padding: 10px;
            margin: 0;
            font-size: 14px;
        }

        #prev, #next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 24px;
            color: #333;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 8px;
            border-radius: 50%;
        }

        #prev { left: 10px; }
        #next { right: 10px; }

        #page-indicator {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .page-dot {
            width: 20px;
            height: 20px;
            background-color: #ccc;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #fff;
        }

        .active-dot {
            background-color: #333;
        }
    </style>
</head>
<body>

<div id="carousel-container">
    <div id="carousel">
        <div class="carousel-item">
            <img src="image1.jpg" alt="Image 1">
            <p>Image 1 Description</p>
        </div>
        <div class="carousel-item">
            <img src="image2.jpg" alt="Image 2">
            <p>Image 2 Description</p>
        </div>
        <div class="carousel-item">
            <img src="image3.jpg" alt="Image 3">
            <p>Image 3 Description</p>
        </div>
        <!-- Add more images as needed -->
    </div>
    <div id="prev">&lt;</div>
    <div id="next">&gt;</div>
    <div id="page-indicator"></div>
</div>

<script>
    var carousel = document.getElementById('carousel');
    var prevButton = document.getElementById('prev');
    var nextButton = document.getElementById('next');
    var pageIndicator = document.getElementById('page-indicator');
    var currentIndex = 0;

    // 图片信息数组
    var imageInfo = [
        "Code 1",
        "Code 2",
        "Code 3"
        // Add more descriptions as needed
    ];

    // 添加页码方框
    for (var i = 0; i < carousel.children.length; i++) {
        var dot = document.createElement('div');
        dot.className = 'page-dot';
        dot.setAttribute('data-index', i);
        dot.textContent = i + 1;
        dot.addEventListener('click', function() {
            clearInterval(autoSlide);
            showSlide(parseInt(this.getAttribute('data-index')));
        });
        pageIndicator.appendChild(dot);
    }

    var dots = document.querySelectorAll('.page-dot');

    // 自动轮播
    var autoSlide = setInterval(function() {
        showSlide(currentIndex + 1);
    }, 3000); // 切换间隔为3秒

    function showSlide(index) {
        currentIndex = (index + carousel.children.length) % carousel.children.length;
        var translateValue = -currentIndex * 100 + '%';
        carousel.style.transform = 'translateX(' + translateValue + ')';

        // 更新页码方框
        dots.forEach(function(dot, i) {
            dot.classList.toggle('active-dot', i === currentIndex);
        });

        // 显示图片信息
        alert(imageInfo[currentIndex]);
    }

    // 点击切换
    prevButton.addEventListener('click', function() {
        clearInterval(autoSlide);
        showSlide(currentIndex - 1);
    });

    nextButton.addEventListener('click', function() {
        clearInterval(autoSlide);
        showSlide(currentIndex + 1);
    });
</script>

</body>
</html>

实现