写一个js原生轮播图，只需要实现图片自动循环播放，且切换时有动画

好的，我可以为您提供一个简单的js原生轮播图代码示例，代码如下：

HTML结构：

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

CSS样式：

.slider {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.slider-list {
  width: 1500px; /* 图片总宽度 */
  position: absolute;
  left: 0;
  top: 0;
  animation: slide 10s infinite; /* 图片轮播动画 */
}
.slider-item {
  float: left;
  width: 500px;
  height: 300px;
}
@keyframes slide {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  25% {
    left: -500px;
  }
  45% {
    left: -500px;
  }
  50% {
    left: -1000px;
  }
  70% {
    left: -1000px;
  }
  75% {
    left: -1500px;
  }
  95% {
    left: -1500px;
  }
  100% {
    left: 0;
  }
}

JS代码：

// 获取轮播图元素
var slider = document.querySelector('.slider');
var sliderList = slider.querySelector('.slider-list');
var sliderItems = slider.querySelectorAll('.slider-item');

// 计算轮播图总宽度
var totalWidth = sliderItems.length * slider.offsetWidth;
sliderList.style.width = totalWidth + 'px';

// 图片轮播动画
var currentIndex = 0;
function slide() {
  currentIndex++;
  if (currentIndex >= sliderItems.length) {
    currentIndex = 0;
  }
  var offset = -currentIndex * slider.offsetWidth;
  sliderList.style.transform = 'translateX(' + offset + 'px)';
  setTimeout(slide, 5000); // 5秒自动轮播
}
slide();

这段代码实现了轮播图的图片自动循环播放，并且切换时有动画效果，您可以根据自己的需求进行修改。