请帮我用html和css写一个轮播板块，一共三个图定时400毫秒横向循环轮播，板块中间放三个小div，横向排列，这三个小div宽都为20px，高为6px，小div背景色都为蓝色，点击这三个小div中的第一个，显示第一个图片，其他图片隐藏，点击第二个小div，显示第二个图片，其他图片隐藏，点击第三小div，显示第三个图片，其他图片隐藏，你只需帮我写好代码，图片我可以自己找，我自己建立文件夹存放图片，只能用html和css写代码，不允许用其他技术和语言。

好的，以下是代码：

<div class="slider">
  <div class="slides">
    <img src="./img/slide1.jpg" alt="Slide 1">
    <img src="./img/slide2.jpg" alt="Slide 2">
    <img src="./img/slide3.jpg" alt="Slide 3">
  </div>

  <div class="dots">
    <div class="dot active"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 1800px;
  height: 400px;
  display: flex;
  transition: transform 0.4s ease-in-out;
}

.slides img {
  width: 600px;
  height: 400px;
}

.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dot {
  width: 20px;
  height: 6px;
  margin: 0 10px;
  border-radius: 3px;
  background-color: blue;
  cursor: pointer;
}

.dot.active {
  background-color: white;
}

/* Javascript code for slide switching */
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slides")[0].getElementsByTagName("img");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

// Automatic slide switching
var slideInterval = setInterval(function() {
  plusSlides(1);
}, 400);

在代码中，我们使用了 `div` 元素来创建轮播板块，使用 `img` 元素来显示轮播的图片。我们使用了 Flexbox 布局来水平排列图片，并使用绝对定位来将图片放置在轮播板块中。

我们还创建了一个 `dots` 容器，在其中放置了三个 `dot` 元素。这些元素将用于切换轮播图片。我们使用了 JavaScript 代码来处理轮播图片的切换，以及小圆点的激活状态。

最后，我们使用 `setInterval` 函数来设置自动轮播图片。该函数每 400 毫秒调用一次 `plusSlides` 函数，该函数使轮播图片向右移动一个位置。