无缝轮播图是网站常见的特效之一，可以给用户带来良好的视觉体验。本文将介绍如何使用JavaScript实现无缝轮播图。

首先，在HTML中创建一个轮播图容器，包括轮播图图片和轮播图控制器：

 
 
 

  
  
  

  
  
  

  
  
  

  
 
 
 
 
 

  
  <
  
  >
  
 
 

接着，使用CSS对轮播图容器和图片进行样式设置：

.slider
 width: 600px;
 height: 400px;
 overflow: hidden;
 position: relative;
.slider ul
 width: 300%;
 height: 400px;
 padding: 0;
 margin: 0;
 position: absolute;
 top: 0;
 left: 0;
.slider ul li
 list-style: none;
 float: left;
 width: 33.3333%;
 height: 100%;
.slider img
 width: 100%;
 height: 100%;
 display: block;
.controllers {
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
}
.controllers span {
 display: inline-block;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 text-align: center;
 line-height: 20px;
 font-size: 14px;
 color: #fff;
 background-color: rgba(0,0,0,0.5);
 margin: 0 10px;
 cursor: pointer;
}
.controllers span.active
 background-color: #f00;

其中，slider为轮播图容器，ul为轮播图图片容器，li为每张图片，img为图片元素，controllers为轮播图控制器容器，prev和next为轮播图控制器。

最后，使用JavaScript对轮播图进行动画效果和控制器的实现：

var index = 0;
var lis = document.querySelectorAll('.slider ul li');
var len = lis.length;
var timer;
function move(distance) {
 var duration = 500;
 var interval = 10;
 var frames = duration / interval;
 var step = distance / frames;
 var count = 0;
 var left = parseInt(lis[0].parentNode.style.left) || 0;
 var target = left + distance;
 clearInterval(timer);
 timer = setInterval(function() {
  left += step;
  count++;
  if (count === frames) {
   clearInterval(timer);
   left = target % (-len * 100);
   if (left <= -3 * 100) {
    left += len * 100;
    index = 0;
   } else if (left >= -1 * 100) {
    left -= len * 100;
    index = 2;
   } else {
    index++;
   }
  }
  lis[0].parentNode.style.left = left + '%';
 }, interval);
}
function next() {
 move(-100);
 setActive();
}
function prev() {
 move(100);
 setActive();
}
function setActive() {
 var controllers = document.querySelectorAll('.slider .controllers span');
 for (var i = 0; i < controllers.length; i++) {
  if (i === index) {
   controllers[i].classList.add('active');
  } else {
   controllers[i].classList.remove('active');
  }
 }
}
document.querySelector('.slider .next').addEventListener('click', next);
document.querySelector('.slider .prev').addEventListener('click', prev);
setInterval(next, 3000);

其中，move函数为控制轮播图容器移动的函数，next和prev为控制器的点击事件，setActive为设置控制器状态的函数，最后在页面加载时启动轮播图。

相似文章

友情链接
• 网站定制开发
• 帮你发
• 小蓄群站获客
• 雅圣洁家政