原生js实现无限循环轮播图效果

原生JS实现无限循环轮播图的步骤如下：

1. 定义样式和HTML结构

先定义轮播图的样式和HTML结构，可以用一个ul包含多个li标签，每个li标签里放置一张图片。

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

div {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slider {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 200%;
  height: 300px;
  left: 0;
  transition: left 0.5s;
}

.slider li {
  float: left;
  width: 50%;
  height: 300px;
  display: inline-block;
}

1. 实现自动轮播效果

使用定时器实现自动轮播效果，先准备好一个计数器变量和一个自动轮播函数autoPlay()，在该函数里设置让计数器加1并移动ul标签的left值到一个新的位置，使得当前图片离开视野，下一张图片进入视野。当计数器超过图片数量时，将计数器重置为1，再从头循环播放。

var slider = document.querySelector('.slider');
var count = 1;

function autoPlay() {
  count++;
  slider.style.left = '-' + count*50 + '%';
  if (count >= slider.children.length - 1) {
    count = 1;
    slider.style.left = '-' + count*50 + '%';
  }
}

setInterval(autoPlay, 3000);

1. 实现点击箭头切换图片

可以给左右箭头绑定点击事件，使得每次点击会移动到下一张或上一张图片。需要注意的是，在移动到最后一张或第一张图片时，要进行特殊处理，跳转到对应的位置。

var prevBtn = document.querySelector('#prevBtn');
var nextBtn = document.querySelector('#nextBtn');

prevBtn.addEventListener('click', function() {
  count--;
  if (count < 1) {
    count = slider.children.length - 2;
    slider.style.left = '-' + count*50 + '%';
  } else {
    slider.style.left = '-' + count*50 + '%';
  }
});

nextBtn.addEventListener('click', function() {
  count++;
  if (count >= slider.children.length - 1) {
    count = 1;
    slider.style.left = '-' + count*50 + '%';
  } else {
    slider.style.left = '-' + count*50 + '%';
  }
});

以上就是使用原生JS实现无限循环轮播图的完整攻略。

以下放两个示例说明：

示例1

演示页面：https://codepen.io/lulubao123/pen/MWJyrPR

代码片段：

<div>
  <ul class="slider">
    <li><img src="https://via.placeholder.com/500x300/afafaf/ffffff" alt=""></li>
    <li><img src="https://via.placeholder.com/500x300/8f8f8f/ffffff" alt=""></li>
    <li><img src="https://via.placeholder.com/500x300/6f6f6f/ffffff" alt=""></li>
    <li><img src="https://via.placeholder.com/500x300/4f4f4f/ffffff" alt=""></li>
    <li><img src="https://via.placeholder.com/500x300/2f2f2f/ffffff" alt=""></li>
  </ul>
  <button id="prevBtn"><</button>
  <button id="nextBtn">></button>
</div>

div {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 500%;
  height: 300px;
  left: 0;
  transition: left 0.5s;
}

.slider li {
  float: left;
  width: 20%;
  height: 300px;
  display: inline-block;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 2em;
  color: #ffffff;
  cursor: pointer;
  padding: 0.5em;
}

#prevBtn {
  left: 1em;
}

#nextBtn {
  right: 1em;
}

var slider = document.querySelector('.slider');
var prevBtn = document.querySelector('#prevBtn');
var nextBtn = document.querySelector('#nextBtn');
var count = 1;

function autoPlay() {
  count++;
  slider.style.left = '-' + count*20 + '%';
  if (count >= slider.children.length - 1) {
    count = 1;
    slider.style.left = '-' + count*20 + '%';
  }
}

setInterval(autoPlay, 2000);

prevBtn.addEventListener('click', function() {
  count--;
  if (count < 1) {
    count = slider.children.length - 2;
    slider.style.left = '-' + count*20 + '%';
  } else {
    slider.style.left = '-' + count*20 + '%';
  }
});

nextBtn.addEventListener('click', function() {
  count++;
  if (count >= slider.children.length - 1) {
    count = 1;
    slider.style.left = '-' + count*20 + '%';
  } else {
    slider.style.left = '-' + count*20 + '%';
  }
});

示例2

演示页面：https://codepen.io/lulubao123/pen/vYLyyMB

代码片段：

<div>
  <ul class="slider">
    <li><img src="https://via.placeholder.com/600x400/afafaf/ffffff" alt=""></li>
    <li><img src="https://via.placeholder.com/600x400/8f8f8f/ffffff" alt=""></li>
    <li><img src="https://via.placeholder.com/600x400/6f6f6f/ffffff" alt=""></li>
    <li><img src="https://via.placeholder.com/600x400/4f4f4f/ffffff" alt=""></li>
  </ul>
  <button id="prevBtn"><</button>
  <button id="nextBtn">></button>
</div>

div {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.slider {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 400%;
  height: 400px;
  left: 0;
  transition: left 0.5s;
}

.slider li {
  float: left;
  width: 25%;
  height: 400px;
  display: inline-block;
}

.slider li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 2em;
  color: #ffffff;
  cursor: pointer;
  padding: 0.5em;
}

#prevBtn {
  left: 1em;
}

#nextBtn {
  right: 1em;
}

var slider = document.querySelector('.slider');
var prevBtn = document.querySelector('#prevBtn');
var nextBtn = document.querySelector('#nextBtn');
var count = 1;

function autoPlay() {
  count++;
  slider.style.left = '-' + count*25 + '%';
  if (count >= slider.children.length - 1) {
    count = 1;
    slider.style.left = '-' + count*25 + '%';
  }
}

setInterval(autoPlay, 2500);

prevBtn.addEventListener('click', function() {
  count--;
  if (count < 1) {
    count = slider.children.length - 2;
    slider.style.left = '-' + count*25 + '%';
  } else {
    slider.style.left = '-' + count*25 + '%';
  }
});

nextBtn.addEventListener('click', function() {
  count++;
  if (count >= slider.children.length - 1) {
    count = 1;
    slider.style.left = '-' + count*25 + '%';
  } else {
    slider.style.left = '-' + count*25 + '%';
  }
});

以上是两个简单的示例，你可以根据需要进行修改和调整，实现更为丰富和复杂的轮播效果。