用js写一个轮播图，手动翻页加自动翻页，无限循环图片。轮播图居中显示，长200px

好的，以下是一个简单的用JavaScript实现的轮播图代码。注意，这里只提供轮播图的实现，具体的样式需要根据实际情况自己调整。

HTML代码：

<div class="slider">
  <div class="slider-wrapper">
    <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">
  </div>
  <a class="slider-prev" href="#">Prev</a>
  <a class="slider-next" href="#">Next</a>
</div>

CSS样式：

.slider {
  width: 200px;
  margin: 0 auto;
  position: relative;
}

.slider-wrapper {
  width: 800px; /* 图片总宽度为 4 张图片的宽度之和 */
  position: absolute;
  left: 0;
  top: 0;
}

.slider-wrapper img {
  float: left;
  width: 200px;
  height: 200px;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  text-decoration: none;
}

.slider-prev {
  left: 0;
}

.slider-next {
  right: 0;
}

JavaScript代码：

// 获取轮播图元素
var slider = document.querySelector('.slider');
var wrapper = slider.querySelector('.slider-wrapper');
var prevBtn = slider.querySelector('.slider-prev');
var nextBtn = slider.querySelector('.slider-next');

// 获取轮播图图片的数量和宽度
var images = wrapper.querySelectorAll('img');
var imageCount = images.length;
var imageWidth = images[0].offsetWidth;

// 设置轮播图的总宽度
wrapper.style.width = (imageCount * imageWidth) + 'px';

// 设置轮播图的当前位置
var currentPosition = 0;

// 设置自动翻页的间隔时间
var autoInterval = 3000;

// 定义自动翻页的函数
function autoSlide() {
  currentPosition++;
  if (currentPosition >= imageCount) {
    currentPosition = 0;
  }
  wrapper.style.left = (-currentPosition * imageWidth) + 'px';
}

// 启动自动翻页
var autoTimer = setInterval(autoSlide, autoInterval);

// 定义手动翻页的函数
function manualSlide(event) {
  event.preventDefault();
  var target = event.target;
  if (target === prevBtn) {
    currentPosition--;
    if (currentPosition < 0) {
      currentPosition = imageCount - 1;
    }
  } else if (target === nextBtn) {
    currentPosition++;
    if (currentPosition >= imageCount) {
      currentPosition = 0;
    }
  }
  wrapper.style.left = (-currentPosition * imageWidth) + 'px';
}

// 绑定手动翻页的事件
prevBtn.addEventListener('click', manualSlide);
nextBtn.addEventListener('click', manualSlide);

这个轮播图实现了手动翻页和自动翻页，图片可以无限循环。同时，轮播图居中显示，长为 200px。你可以根据自己的需要对代码进行调整和优化。