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

想要实现网页中的轮播图片效果，可以使用 HTML、CSS 和 JavaScript 来完成。以下是一种可能的实现方式：

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 代码：

.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 代码：

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 秒自动切换到下一张图片，循环播放。