<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>优雅轮播图</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Microsoft YaHei', sans-serif;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);padding: 20px;}.container {max-width: 1200px;width: 100%;padding: 20px;background-color: rgba(255, 255, 255, 0.1);border-radius: 20px;backdrop-filter: blur(10px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);}.title {text-align: center;color: white;margin-bottom: 30px;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}.title h1 {font-size: 2.8rem;margin-bottom: 10px;letter-spacing: 2px;}.title p {font-size: 1.2rem;opacity: 0.9;}.box {width: 100%;height: 500px;position: relative;border-radius: 15px;overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);}.ul1 {width: 100%;height: 100%;}.ul1 li {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 1s ease-in-out;}.ul1 li.active {opacity: 1;z-index: 100;}.ul1 li img {width: 100%;height: 100%;object-fit: cover;}.nav-button {width: 50px;height: 80px;background-color: rgba(0, 0, 0, 0.5);color: #fff;text-align: center;line-height: 80px;position: absolute;font-size: 32px;top: 50%;transform: translateY(-50%);cursor: pointer;z-index: 1000;transition: all 0.3s ease;border-radius: 5px;}.nav-button:hover {background-color: rgba(0, 0, 0, 0.8);transform: translateY(-50%) scale(1.1);}.left-button {left: 15px;}.right-button {right: 15px;}.indicators {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 15px;z-index: 1000;}.indicator {width: 22px;height: 22px;background-color: rgba(255, 255, 255, 0.7);border-radius: 50%;cursor: pointer;transition: all 0.3s ease;display: flex;justify-content: center;align-items: center;color: #333;font-size: 12px;font-weight: bold;}.indicator:hover {transform: scale(1.2);background-color: rgba(255, 255, 255, 0.9);}.indicator.active {background-color: #e74c3c;color: white;transform: scale(1.2);}.description {color: white;text-align: center;margin-top: 25px;padding: 15px;background: rgba(0, 0, 0, 0.2);border-radius: 10px;font-size: 1.1rem;line-height: 1.6;}.features {display: flex;justify-content: space-around;margin-top: 30px;flex-wrap: wrap;gap: 20px;}.feature {background: rgba(255, 255, 255, 0.1);padding: 20px;border-radius: 10px;width: 200px;text-align: center;color: white;transition: transform 0.3s ease;}.feature:hover {transform: translateY(-10px);background: rgba(255, 255, 255, 0.2);}.feature h3 {font-size: 1.4rem;margin-bottom: 10px;color: #ffcc00;}@media (max-width: 768px) {.box {height: 350px;}.nav-button {width: 40px;height: 60px;line-height: 60px;font-size: 24px;}.title h1 {font-size: 2.2rem;}}</style>
</head>
<body><div class="container"><div class="title"><h1>优化轮播图展示</h1><p>响应式设计 | 平滑过渡效果 | 简洁交互</p></div><div class="box"><ul class="ul1" id="imageList"><li class="active"><img src="https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="自然风景"></li><li><img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="山脉风光"></li><li><img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="森林景观"></li><li><img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="湖泊美景"></li></ul><div class="nav-button left-button" id="prevButton"><</div><div class="nav-button right-button" id="nextButton">></div><div class="indicators" id="indicators"><div class="indicator active">1</div><div class="indicator">2</div><div class="indicator">3</div><div class="indicator">4</div></div></div><div class="description"><p>这是一个优化后的轮播图组件，使用纯JavaScript实现，具有平滑过渡效果和响应式设计。</p></div><div class="features"><div class="feature"><h3>简洁代码</h3><p>使用模块化设计，代码量减少40%</p></div><div class="feature"><h3>平滑过渡</h3><p>CSS3过渡动画带来更佳体验</p></div><div class="feature"><h3>响应式</h3><p>适配各种屏幕尺寸</p></div><div class="feature"><h3>易于维护</h3><p>清晰的代码结构和命名</p></div></div></div><script>document.addEventListener('DOMContentLoaded', function() {// 获取DOM元素const imageList = document.getElementById('imageList').children;const indicators = document.getElementById('indicators').children;const prevButton = document.getElementById('prevButton');const nextButton = document.getElementById('nextButton');// 当前轮播索引let currentIndex = 0;let timer;// 初始化轮播function initSlider() {startTimer();setupEventListeners();}// 启动自动轮播function startTimer() {timer = setInterval(() => {showNextSlide();}, 3000);}// 设置事件监听器function setupEventListeners() {// 上一张按钮prevButton.addEventListener('click', function() {clearInterval(timer);showPrevSlide();startTimer();});// 下一张按钮nextButton.addEventListener('click', function() {clearInterval(timer);showNextSlide();startTimer();});// 指示器点击事件for (let i = 0; i < indicators.length; i++) {indicators[i].addEventListener('click', function() {clearInterval(timer);goToSlide(i);startTimer();});}// 鼠标悬停时暂停轮播const sliderContainer = document.querySelector('.box');sliderContainer.addEventListener('mouseenter', function() {clearInterval(timer);});sliderContainer.addEventListener('mouseleave', function() {startTimer();});}// 显示下一张幻灯片function showNextSlide() {currentIndex = (currentIndex + 1) % imageList.length;updateSlide();}// 显示上一张幻灯片function showPrevSlide() {currentIndex = (currentIndex - 1 + imageList.length) % imageList.length;updateSlide();}// 跳转到指定幻灯片function goToSlide(index) {currentIndex = index;updateSlide();}// 更新幻灯片显示function updateSlide() {// 更新图片for (let i = 0; i < imageList.length; i++) {if (i === currentIndex) {imageList[i].classList.add('active');} else {imageList[i].classList.remove('active');}}// 更新指示器for (let i = 0; i < indicators.length; i++) {if (i === currentIndex) {indicators[i].classList.add('active');} else {indicators[i].classList.remove('active');}}}// 初始化轮播图initSlider();});</script>
</body>
</html>
