JS实现的简单轮播图运动效果示例

讲解“JS实现的简单轮播图运动效果示例”的完整攻略，包括以下几个部分：

1. 需求分析和目标明确：我们的目标是实现一个简单的轮播图，具有自动播放和手动切换的功能，且切换过程需要带有动画效果，同时要求代码简洁易懂，易于维护。

2. HTML结构布局：首先，我们需要在HTML中定义轮播图容器和轮播项。例如，我们可以定义一个包含三个图片的轮播图，并使用ul和li标签来展示：

<div class="slider">
  <ul class="slider-list">
    <li><img src="1.jpg" alt=""></li>
    <li><img src="2.jpg" alt=""></li>
    <li><img src="3.jpg" alt=""></li>
  </ul>
</div>

1. CSS样式设置：接着，我们需要给轮播图容器和轮播项设置一些必要的CSS样式，例如，设置轮播图容器的宽度和高度，以及隐藏overflow等。具体CSS代码如下：

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.slider-list {
  position: absolute;
  left: 0;
  top: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.slider-list li {
  float: left;
  width: 600px;
  height: 400px;
}
.slider-list li img {
  width: 100%;
  height: 100%;
}

1. JS代码实现：最后，在JavaScript中实现轮播图的自动播放和手动切换。具体代码如下：

var sliderList = document.querySelector('.slider-list');
var sliderItems = sliderList.children;    // 获取轮播项
var len = sliderItems.length;
var index = 0;    // 记录当前轮播项的索引

// 自动播放函数
function autoPlay() {
  index++;
  if (index >= len) {
    index = 0;
  }
  moveSlide(index);
}

// 轮播切换函数
function moveSlide(next) {
  var current = index;
  index = next;
  var currentLeft = -current * 600;
  var nextLeft = -next * 600;
  var step = 0;
  var distance = nextLeft - currentLeft;
  var duration = 500;
  var interval = 10;
  var speed = distance / duration * interval;

  // 动画函数
  function animate() {
    step += speed;
    if (step < distance) {
      sliderList.style.left = currentLeft + step + 'px';
      requestAnimationFrame(animate);
    } else {
      sliderList.style.left = nextLeft + 'px';
    }
  }

  animate();
}

// 绑定事件
setInterval(autoPlay, 3000);

上面的代码中，通过获取sliderList元素中所有的子元素，可以动态获取轮播图中所有的轮播项，并通过记录index变量，实现轮播图项的自动切换。同时，moveSlide()函数通过计算currentLeft和nextLeft的差值，以及duration、interval等参数，用动画函数实现了轮播图项的移动。最后，通过绑定setInterval()函数实现轮播图的自动播放。

其中，当前的动画效果使用的是 requestAnimationFrame 函数，使用方式为：

requestAnimationFrame(function fn() {...});

以上就是一个简单的轮播图运动效果示例的制作攻略。

下面再给出一个实现轮播图循环滚动的示例：

var sliderWrap = document.querySelector('.slider-wrap');
var sliderList = sliderWrap.querySelector('.slider-list');
var sliderItems = sliderList.children;
var len = sliderItems.length;
var slideWidth = sliderWrap.clientWidth;    // 轮播项的宽度
var index = 1;
var timer;

// 循环滚动函数
function rolling() {
  index++;
  slide(sliderList, -index * slideWidth, 500, function() {
    if (index === len - 1) {
      index = 1;
      sliderList.style.left = -slideWidth + 'px';
    }
  });
}

// 轮播切换函数
function slide(elem, target, duration, cb) {
  var current = parseFloat(elem.style.left || 0);
  var distance = target - current;
  var interval = 10;
  var speed = distance / duration * interval;
  var step = 0;

  function animate() {
    step += speed;
    if (Math.abs(step) < Math.abs(distance)) {
      elem.style.left = current + step + 'px';
      requestAnimationFrame(animate);
    } else {
      elem.style.left = target + 'px';
      cb && cb();
    }
  }

  animate();
}

// 自动播放
timer = setInterval(rolling, 3000);

// 鼠标移入移出事件
sliderWrap.addEventListener('mouseenter', function() {
  clearInterval(timer);
});
sliderWrap.addEventListener('mouseleave', function() {
  timer = setInterval(rolling, 3000);
});

此示例中，我们将循环滚动效果加入到了轮播图中。可以看到，我们需要在轮播图的最前面新增一张与轮播图最后面的图片相同的图片，即让第一张和最后一张相同（这样在轮播图滚动时，就可以无缝连接之前和之后的图片了）。

还需要注意到，我们在计算轮播项的偏移量时，需要加上一个负的第一项图片宽度的值，以防止轮播图过一遍后就无法再次轮播。同时，在轮播到最末尾时需要重置轮播项的当前位置和轮播索引。