纯js实现轮播图效果

下面是使用纯JS实现轮播图效果的完整攻略：

确定HTML结构

首先，我们需要确定轮播图的HTML结构。可以使用以下结构：

<div id="slider">
  <ul>
    <li><img src="img/slide1.jpg" alt="Slide 1"></li>
    <li><img src="img/slide2.jpg" alt="Slide 2"></li>
    <li><img src="img/slide3.jpg" alt="Slide 3"></li>
  </ul>
</div>

这里使用了<div>标签包裹整个轮播图，并在其中使用了一个<ul>标签作为轮播图的容器，每张图片使用一个<li>标签包裹。<img>标签用于展示图片，可以设置src和alt属性。

设计CSS样式

接下来，我们需要设计用于显示轮播图的CSS样式，例如：

#slider {
  position: relative;
  overflow: hidden;
  width: 800px;
  height: 400px;
}
#slider ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 3200px;
  position: absolute;
  left: 0;
  top: 0;
}
#slider li {
  float: left;
  width: 800px;
  height: 400px;
}

这里使用了position属性设置轮播图为相对定位，并使用overflow属性设置隐藏超出容器的内容。<ul>标签的position属性设置为绝对定位，并在左上角设置了相对于父元素的偏移位置。每张图片的<li>标签使用float属性使其并排，宽高设置为和容器相同。

编写JS代码

最后，我们需要编写实现轮播图效果的JS代码。可以使用以下代码实现轮播图自动播放、左右切换功能：

// 获取轮播图元素和图片列表
var slider = document.getElementById("slider");
var sliderList = document.querySelector("#slider ul");

// 获取轮播图的宽高
var sliderWidth = slider.offsetWidth;
var sliderHeight = slider.offsetHeight;

// 定义当前图片索引
var currentIndex = 0;

// 获取左右箭头元素
var prevBtn = document.getElementById("prev");
var nextBtn = document.getElementById("next");

// 定义轮播图自动播放方法
function autoPlay() {
  // 每隔3秒切换到下一张图片
  setInterval(function() {
    currentIndex++;
    if (currentIndex >= 3) {
      currentIndex = 0;
    }
    moveSlider(-sliderWidth * currentIndex);
  }, 3000);
}

// 定义图片移动方法
function moveSlider(offset) {
  sliderList.style.left = offset + "px";
}

// 绑定左右箭头点击事件
prevBtn.onclick = function() {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = 2;
  }
  moveSlider(-sliderWidth * currentIndex);
};
nextBtn.onclick = function() {
  currentIndex++;
  if (currentIndex >= 3) {
    currentIndex = 0;
  }
  moveSlider(-sliderWidth * currentIndex);
};

// 自动播放轮播图
autoPlay();

首先，我们需要获取轮播图相关元素，包括轮播图本身和图片列表等。然后获取轮播图的宽高，并定义当前显示的图片索引。接下来，定义了自动播放和图片移动的方法，并监听左右箭头的点击事件。最后调用自动播放方法，实现轮播图的自动播放。

示例1：
下面是一个完整的示例，包含HTML、CSS和JS部分，可以在此基础上进行二次开发。
https://codepen.io/jeffguo123/pen/XWKBbVE

示例2：
以下是使用requestAnimationFrame方法优化图片移动效果的JS代码：

// 定义动画执行函数
function moveFrame(offset, duration) {
  var startTime = Date.now();
  var startOffset = parseFloat(sliderList.style.left);
  var distance = offset - startOffset;
  var progress, currentOffset;
  function frame() {
    progress = (Date.now() - startTime) / duration;
    if (progress > 1) {
      progress = 1;
    }
    currentOffset = startOffset + distance * progress;
    sliderList.style.left = currentOffset + "px";
    if (progress < 1) {
      requestAnimationFrame(frame);
    }
  }
  requestAnimationFrame(frame);
}

// 定义图片移动方法
function moveSlider(offset) {
  moveFrame(offset, 500);
}

这里使用了requestAnimationFrame方法代替setInterval方法，可以使图片移动效果更加流畅。首先定义了一个动画执行函数moveFrame，接受图片需要移动的偏移量和动画执行的时长。在函数内部，获取开始时间和起始偏移量，并计算出移动距离，然后使用requestAnimationFrame方法进行动画执行，根据当前已经执行的时间、起始偏移量和移动距离计算出当前的偏移量，并设置到图片容器上。如果动画还没有执行完毕，则继续递归调用requestAnimationFrame方法，直到动画执行完毕为止。

参考链接：
https://www.w3cplus.com/javascript/how-to-create-a-responsive-image-slider-in-javascript.html