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

html 复制代码
<!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>

实现

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD4 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding4 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空4 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子8165 小时前
scroll-marker轮播组件不再难
前端·css