设计制作网页中轮播图片效果 要求： 参考各大电商网站轮播图尺寸及效果，选取4-5张图片，图片分别对应 1、2、3....，鼠标放在或点击某数字上时该数字对应的图片出现（30分） 数字位置在图片右下位置，背景圆形，鼠标经过背景颜色发生变化（10分） 设置总的图片宽度--通过位移来达到轮播效果(5分） 图像在页面位置居中（5分）

想要实现网页中的轮播图片效果，可以使用 HTML、CSS 和 JavaScript 来完成。以下是一种可能的实现方式： HTML 代码： ```html <div class="slideshow"> <div class="slides"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> <img src="image5.jpg" alt="Image 5"> </div> <div class="controls"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> ``` CSS 代码： ```css .slideshow { position: relative; width: 100%; height: 400px; overflow: hidden; margin: 0 auto; } .slides { position: absolute; width: 500%; height: 400px; left: 0; top: 0; animation: slide 20s infinite; } .slides img { width: 20%; height: 400px; float: left; } .controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .controls span { display: block; width: 16px; height: 16px; border-radius: 50%; background-color: #fff; margin: 0 10px; cursor: pointer; } .controls span.active { background-color: #000; } @keyframes slide { 0% { left: 0; } 20% { left: 0; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } ``` JavaScript 代码： ```javascript const slides = document.querySelector('.slides'); const controls = document.querySelectorAll('.controls span'); let index = 1; function setActive(index) { controls.forEach(control => control.classList.remove('active')); controls[index].classList.add('active'); } setActive(index - 1); controls.forEach((control, i) => { control.addEventListener('click', () => { index = i + 1; setActive(index - 1); slides.style.transform = `translateX(-${(index - 1) * 20}%)`; slides.style.animationPlayState = 'paused'; }); }); slides.addEventListener('mouseover', () => { slides.style.animationPlayState = 'paused'; }); slides.addEventListener('mouseout', () => { slides.style.animationPlayState = 'running'; }); setInterval(() => { index++; if (index > 5) { index = 1; } setActive(index - 1); slides.style.transform = `translateX(-${(index - 1) * 20}%)`; }, 5000); ``` 这个实现方式包含一个轮播图容器（`.slideshow`）和两个子元素：一个图片列表（`.slides`）和一个控制按钮列表（`.controls`）。图片列表包含五个图片，每个图片的宽度为 20%。控制按钮列表包含五个数字（1~5），每个数字对应一个图片。 使用 CSS 的 `position` 属性将图片列表定位到容器左上角，并使用 `animation` 属性创建一个无限循环的动画，通过改变 `left` 属性的值来实现图片的滚动效果。同时，设置控制按钮列表的位置和样式，并为每个按钮添加点击事件，点击时切换到对应的图片。 使用 JavaScript 实现了以下功能： - 初始化轮播图，将第一个图片设为当前图片，并将第一个数字设为当前数字。 - 点击数字时，切换到对应的图片，并暂停轮播图的动画。 - 鼠标移到轮播图上时，暂停轮播图的动画。 - 鼠标移出轮播图时，恢复轮播图的动画。 - 每隔 5 秒自动切换到下一张图片，循环播放。