写一个js原生轮播图，只需要实现图片自动循环播放

好的，下面是一个简单的JS原生轮播图实现方法：

HTML部分：

<div class="slider">
  <ul class="slider-images">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
  </ul>
</div>

CSS部分：

.slider {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slider-images {
  position: absolute;
  width: 400%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slider-images li {
  float: left;
  width: 25%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.slider-images img {
  width: 100%;
  height: 100%;
  display: block;
}

JavaScript部分：

var sliderImages = document.querySelector('.slider-images');
var sliderImagesList = document.querySelectorAll('.slider-images li');
var sliderImageWidth = sliderImagesList[0].offsetWidth;
var currentIndex = 0;
var timer;

sliderImages.style.width = sliderImageWidth * sliderImagesList.length + 'px';

function slide() {
  currentIndex++;
  if (currentIndex === sliderImagesList.length) {
    currentIndex = 0;
  }
  var newPosition = -sliderImageWidth * currentIndex;
  sliderImages.style.transform = 'translateX(' + newPosition + 'px)';
}

timer = setInterval(slide, 3000);

代码解析：

首先，我们获取轮播图的容器和图片列表，以及每张图片的宽度和当前索引值。

然后，我们设置轮播图容器的宽度为所有图片宽度的总和，以便让所有图片在同一行排列。

接着，我们定义一个 slide 函数，用于切换图片。每次调用该函数，我们将当前索引值加一，并且检查是否已经到达图片列表的末尾。如果是，则将索引值重置为 0。

最后，我们根据当前索引值计算出新的位置，并将轮播图容器移动到该位置。我们使用 setInterval 函数每隔一定的时间调用一次 slide 函数，从而让轮播图自动循环播放。

注意：该代码只是一个简单的轮播图实现，可能还需要进行优化和改进，例如添加左右箭头和圆点导航等功能。