原生js写一个滑动效果

好的，以下是一个简单的原生JS实现滑动效果的代码：

HTML部分：

<div class="slider-wrap">
  <ul class="slider-list">
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
    <li><img src="img4.jpg"></li>
  </ul>
</div>

CSS部分：

.slider-wrap {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider-list {
  width: 2000px; /* 每个图片的宽度为500px，一共有4张图片，因此总宽度为2000px */
  position: absolute;
  left: 0;
  top: 0;
}

.slider-list li {
  float: left;
  width: 500px;
  height: 300px;
}

JS部分：

var sliderList = document.querySelector('.slider-list');
var sliderItemWidth = sliderList.querySelector('li').offsetWidth; // 获取每个图片的宽度
var sliderIndex = 0; // 当前显示的图片索引
var sliderInterval; // 自动播放的定时器

// 自动播放
function autoPlay() {
  sliderInterval = setInterval(function() {
    sliderIndex++;
    if (sliderIndex >= 4) {
      sliderIndex = 0; // 如果已经到最后一张图片，将索引重置为0
    }
    sliderList.style.left = -sliderIndex * sliderItemWidth + 'px'; // 移动图片列表
  }, 2000);
}

autoPlay(); // 页面加载完成后自动播放

// 鼠标移入暂停播放，移出继续播放
var sliderWrap = document.querySelector('.slider-wrap');
sliderWrap.addEventListener('mouseover', function() {
  clearInterval(sliderInterval);
});

sliderWrap.addEventListener('mouseout', function() {
  autoPlay();
});

以上代码实现了一个简单的滑动效果，每隔2秒自动播放下一张图片，鼠标移入暂停播放，移出继续播放。