写一个好看的轮播图代码，可以定时水平轮播

以下是一个简单的水平轮播图代码，使用了HTML、CSS和JavaScript实现，并且可以定时轮播：

HTML代码：

<div class="slider">
  <div class="slider-wrapper">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
    <img src="image5.jpg">
  </div>
</div>

CSS代码：

.slider {
  width: 100%;
  overflow: hidden;
}

.slider-wrapper {
  width: 500%;
  height: 300px;
  display: flex;
  transition: transform 0.5s ease;
}

.slider-wrapper img {
  width: 20%;
}

.slider-wrapper img:first-child {
  margin-left: 0;
}

.slider-wrapper img:last-child {
  margin-right: 0;
}

JavaScript代码：

let sliderWrapper = document.querySelector('.slider-wrapper');
let images = document.querySelectorAll('.slider-wrapper img');
let imageWidth = images[0].clientWidth;
let currentImage = 0;

function slider() {
  currentImage++;
  if (currentImage > images.length - 1) {
    currentImage = 0;
  }
  sliderWrapper.style.transform = `translateX(-${imageWidth * currentImage}px)`;
}

let intervalId = setInterval(slider, 3000);

sliderWrapper.addEventListener('mouseover', function() {
  clearInterval(intervalId);
});

sliderWrapper.addEventListener('mouseout', function() {
  intervalId = setInterval(slider, 3000);
});

解释：

- HTML代码中，我们使用了一个`<div>`元素来作为轮播图的容器，并将图片放在了一个包含在其中的`<div>`元素中。
- CSS代码中，我们设置了轮播图容器的宽度为100%，并使用了`overflow: hidden`属性来隐藏超出容器宽度的图片。我们还设置了轮播图容器的高度和图片宽度，并使用`display: flex`属性来让图片在水平方向排列。最后，我们设置了图片之间的间距，以及第一张图片和最后一张图片的特殊样式。
- JavaScript代码中，我们首先获取了轮播图容器和所有的图片元素，并计算了一张图片的宽度。然后，我们定义了一个`slider()`函数，每次调用时都将当前的图片序号加1，并使用`transform`属性将轮播图容器向左移动一定的距离。最后，我们使用`setInterval()`函数来定时调用`slider()`函数，实现轮播效果，并且将返回的定时器ID保存在变量`intervalId`中。
- 我们还使用了`addEventListener()`函数来为轮播图容器添加`mouseover`和`mouseout`事件监听器，当鼠标移动到轮播图上时，清除定时器；当鼠标移出轮播图时，重新设置定时器，实现定时轮播的效果。

注意：

- 代码中用到的图片需要自行添加，并修改图片路径。
- 这只是一个简单的轮播图实现，还有很多需要优化的地方。