做一个图片左右自动轮播也可以用左右按钮控制，下面图片是小圆点

制作一个图片轮播效果，通常会使用JavaScript库如Swiper.js、Bootstrap Carousel或纯CSS和HTML实现。下面是一个简单的HTML和CSS实现，配合JavaScript来控制图片左右滑动和小圆点导航：

HTML结构：

<div class="carousel-container">
  <div class="carousel">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <!-- 更多图片... -->
  </div>
  <div class="dot-navigation">
    <button class="dot active" data-slide-to="0"></button>
    <button class="dot" data-slide-to="1"></button>
    <!-- 更多小圆点... -->
  </div>
</div>

CSS样式：

.carousel {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.carousel img {
  display: none;
  transition: opacity 0.5s ease-in-out;
}

.carousel img.active {
  display: block;
}

.dot-navigation {
  position: absolute;
  bottom: 10px;
}

JavaScript控制：

var dots = document.querySelectorAll('.dot');
var slides = document.querySelectorAll('img');

dots.forEach(function(dot, index) {
  dot.addEventListener('click', function() {
    slides.forEach(function(img) {
      img.classList.remove('active');
    });
    slides[index].classList.add('active');
    // 根据需求调整滑动动画
  });
});

// 自动轮播功能（这里仅提供基础示例）
setInterval(function() {
  var currentSlide = document.querySelector('.active');
  if (currentSlide.nextElementSibling) {
    currentSlide.parentNode.removeChild(currentSlide);
    currentSlide = document.querySelector('.dot').nextElementSibling;
    slides[currentSlide.dataset.slideTo].style.display = 'block';
  } else {
    currentSlide.parentNode.insertBefore(slides[0], currentSlide);
    slides[currentSlide.previousElementSibling.dataset.slideTo].style.display = 'none';
  }
}, 3000); // 每隔3秒切换一次

这个例子展示了基本的轮播效果和小圆点导航，你可以根据项目需求进行调整，例如添加更多的交互选项或自适应不同屏幕尺寸。