完成轮播图界面，完成点击按钮切换图片，完成轮播图
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>4张图片轮播图</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } /* 轮播图容器 */ .carousel-container { position: relative; width: 450px; height: 450px; margin: 50px auto; overflow: hidden; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.2); } /* 图片轮播列表 */ .carousel-list { display: flex; width: 400%; /* 4张图片，所以宽度为400% */ height: 100%; transition: transform 0.5s ease; } .carousel-item { width: 100%; height: 100%; } .carousel-item img { width: 100%; height: 100%; object-fit: cover; } /* 左右切换按钮 */ .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-color: rgba(255,255,255,0.7); border: none; border-radius: 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background-color 0.3s; } .carousel-btn:hover { background-color: rgba(255,255,255,1); } .prev-btn { left: 20px; } .next-btn { right: 20px; } /* 页码指示器 */ .carousel-indicators { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .indicator-btn { width: 12px; height: 12px; border-radius: 50%; border: none; background-color: rgba(255,255,255,0.5); cursor: pointer; transition: background-color 0.3s, transform 0.3s; } .indicator-btn.active { background-color: #ffffff; transform: scale(1.2); } </style> </head> <body> <div class="carousel-container" id="carousel"> <!-- 轮播图片列表 --> <div class="carousel-list" id="carouselList"> <div class="carousel-item"> <img src="./img/1.jpg" alt="轮播图1"> </div> <div class="carousel-item"> <img src="./img/2.jpg" alt="轮播图2"> </div> <div class="carousel-item"> <img src="./img/3.jpg" alt="轮播图3"> </div> <div class="carousel-item"> <img src="./img/4.jpg" alt="轮播图4"> </div> </div> <!-- 左右切换按钮 --> <button class="carousel-btn prev-btn" id="prevBtn"><</button> <button class="carousel-btn next-btn" id="nextBtn">></button> <!-- 页码指示器 --> <div class="carousel-indicators" id="indicators"></div> </div> <script> // 获取DOM元素 const carousel = document.getElementById('carousel'); const carouselList = document.getElementById('carouselList'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const indicators = document.getElementById('indicators'); // 轮播图配置 const imgCount = 4; // 图片数量 let currentIndex = 0; // 当前显示的图片索引 let autoPlayTimer = null; // 自动轮播定时器 const autoPlayInterval = 3000; // 自动轮播间隔（毫秒） // 生成页码指示器按钮 function createIndicators() { for (let i = 0; i < imgCount; i++) { const btn = document.createElement('button'); btn.className = 'indicator-btn'; if (i === 0) btn.classList.add('active'); // 初始第一个按钮激活 btn.dataset.index = i; // 存储索引数据 // 点击页码按钮切换图片 btn.addEventListener('click', () => { currentIndex = i; updateCarousel(); }); indicators.appendChild(btn); } } // 更新轮播图显示和页码状态 function updateCarousel() { // 计算偏移量，移动图片列表 const offset = -currentIndex * (100 / imgCount); carouselList.style.transform = `translateX(${offset}%)`; // 更新页码按钮激活状态 const indicatorBtns = document.querySelectorAll('.indicator-btn'); indicatorBtns.forEach((btn, index) => { if (index === currentIndex) { btn.classList.add('active'); } else { btn.classList.remove('active'); } }); } // 上一张 function prevImg() { currentIndex = (currentIndex - 1 + imgCount) % imgCount; updateCarousel(); } // 下一张 function nextImg() { currentIndex = (currentIndex + 1) % imgCount; updateCarousel(); } // 启动自动轮播 function startAutoPlay() { autoPlayTimer = setInterval(nextImg, autoPlayInterval); } // 停止自动轮播 function stopAutoPlay() { clearInterval(autoPlayTimer); } // 初始化 function initCarousel() { createIndicators(); // 创建页码按钮 startAutoPlay(); // 启动自动轮播 // 绑定左右按钮事件 prevBtn.addEventListener('click', prevImg); nextBtn.addEventListener('click', nextImg); // 鼠标悬停暂停轮播，离开继续 carousel.addEventListener('mouseenter', stopAutoPlay); carousel.addEventListener('mouseleave', startAutoPlay); } // 页面加载完成后初始化轮播图 window.addEventListener('DOMContentLoaded', initCarousel); </script> </body> </html>
