原生JS实现简单的无缝自动轮播效果

下面是“原生JS实现简单无缝自动轮播效果”的完整攻略。

确定HTML结构

在实现轮播效果之前，我们需要先确定HTML结构。一般来说，轮播图的容器是一个固定宽度的盒子，里面包含多张图片，我们可以使用ul和li标签来实现这个容器和图片的列表。

HTML结构可以如下所示：

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

CSS样式设置

接下来，我们需要为轮播图设置CSS样式。主要包括设置轮播图容器的宽度、高度、位置等属性，以及为图片设置宽度、高度、排列方式等属性。

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.slider ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 6000px;
}
.slider li {
  float: left;
  width: 600px;
  height: 400px;
}
.slider img {
  width: 100%;
  height: 100%;
}

JS实现无缝轮播

接下来，我们就可以使用原生JS来实现轮播效果了。具体实现步骤可以分为三步：获取元素、设置定时器、计算位置。

获取元素

首先，我们需要获取轮播图容器、图片列表和图片数量。

var slider = document.querySelector('.slider');
var sliderList = slider.querySelector('ul');
var sliderItems = sliderList.querySelectorAll('li');
var sliderItemWidth = sliderItems[0].offsetWidth;
var sliderLength = sliderItems.length;

设置定时器

然后，我们需要设置一个定时器，每隔一段时间就自动切换到下一张图片。当切换到最后一张图片时，需要将图片列表的left值设置为0，从而实现无缝轮播。

var currentSliderItem = 0;
var timer = setInterval(function() {
  var nextSliderItem = currentSliderItem + 1;
  if (nextSliderItem === sliderLength) {
    sliderList.style.left = 0;
    currentSliderItem = 0;
    nextSliderItem = 1;
  }
  var sliderOffsetLeft = -(nextSliderItem * sliderItemWidth);
  sliderList.style.left = sliderOffsetLeft + 'px';
  currentSliderItem++;
}, 3000);

计算位置

最后，我们需要计算当前要切换到的图片的位置，将列表容器的left值设置为相应的负值即可实现图片的切换。

var nextSliderItem = currentSliderItem + 1;
if (nextSliderItem === sliderLength) {
  sliderList.style.left = 0;
  currentSliderItem = 0;
  nextSliderItem = 1;
}
var sliderOffsetLeft = -(nextSliderItem * sliderItemWidth);
sliderList.style.left = sliderOffsetLeft + 'px';
currentSliderItem++;

示例说明

下面，我们以两个示例说明如何使用原生JS来实现简单的无缝轮播效果。

示例1：

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

.slider {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}
.slider ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 2000px;
}
.slider li {
  float: left;
  width: 400px;
  height: 300px;
}
.slider img {
  width: 100%;
  height: 100%;
}

var slider = document.querySelector('.slider');
var sliderList = slider.querySelector('ul');
var sliderItems = sliderList.querySelectorAll('li');
var sliderItemWidth = sliderItems[0].offsetWidth;
var sliderLength = sliderItems.length;

var currentSliderItem = 0;
var timer = setInterval(function() {
  var nextSliderItem = currentSliderItem + 1;
  if (nextSliderItem === sliderLength) {
    sliderList.style.left = 0;
    currentSliderItem = 0;
    nextSliderItem = 1;
  }
  var sliderOffsetLeft = -(nextSliderItem * sliderItemWidth);
  sliderList.style.left = sliderOffsetLeft + 'px';
  currentSliderItem++;
}, 3000);

示例2：

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

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.slider ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 1800px;
}
.slider li {
  float: left;
  width: 600px;
  height: 400px;
}
.slider img {
  width: 100%;
  height: 100%;
}

var slider = document.querySelector('.slider');
var sliderList = slider.querySelector('ul');
var sliderItems = sliderList.querySelectorAll('li');
var sliderItemWidth = sliderItems[0].offsetWidth;
var sliderLength = sliderItems.length;

var currentSliderItem = 0;
var timer = setInterval(function() {
  var nextSliderItem = currentSliderItem + 1;
  if (nextSliderItem === sliderLength) {
    sliderList.style.left = 0;
    currentSliderItem = 0;
    nextSliderItem = 1;
  }
  var sliderOffsetLeft = -(nextSliderItem * sliderItemWidth);
  sliderList.style.left = sliderOffsetLeft + 'px';
  currentSliderItem++;
}, 3000);

以上就是“原生JS实现简单无缝自动轮播效果”的完整攻略，希望对您有所帮助。