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

<!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>

实现