JavaScript实现手写循环滑动效果

下面是一份JavaScript实现手写循环滑动效果的完整攻略：

1. 确定需求和目标

在开始编写代码之前，我们需要首先明确需求和目标。对于这个循环滑动效果，需求和目标如下：

1. 实现一个轮播图，图片从左往右进行循环滑动；
2. 点击向左/向右的箭头按钮，可以实现图片的向左/向右滑动；
3. 当鼠标悬浮在图片上时，停止自动轮播，鼠标移开后恢复自动轮播。

2. 实现自动轮播效果

在代码中，我们首先需要实现自动轮播效果。可以使用setInterval函数来实现图片的定时滑动。具体代码如下：

let timer = setInterval(function() {
  console.log('auto scroll');
}, 2000);

上面的代码表示每隔2秒钟，将会打印一次auto scroll字符串。

3. 实现滑动效果

接下来，我们需要实现图片的循环滑动。这一步可以通过控制CSS属性来实现。具体代码如下：

let slider = document.querySelector('.slider');
let items = document.querySelectorAll('.item');
let index = 0;

function slideTo() {
  index++;
  if (index > items.length - 1) {
    index = 0;
  }
  slider.style.transform = `translateX(-${index * 100}%)`;
}

在上面的代码中，我们使用了querySelector和querySelectorAll函数来选取轮播图的元素。slideTo函数则用来实现图片的滑动效果。index变量用来记录当前滑动到了哪一张图片。在滑动时，我们通过改变slider元素的transform属性来实现图片的滑动。

4. 实现箭头按钮的点击效果

为了实现点击向左/向右的箭头按钮，可以使用事件监听，在点击按钮时触发滑动效果。具体代码如下：

let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');

prevBtn.addEventListener('click', function() {
  console.log('prev button clicked');
});

nextBtn.addEventListener('click', function() {
  console.log('next button clicked');
});

上面的代码中，我们选取了两个箭头按钮元素，分别为prev和next。然后使用addEventListener函数添加了点击事件监听。在点击时，将会打印出相应的字符串。

5. 暂停和恢复自动轮播

最后，我们需要实现当鼠标悬浮在图片上时，暂停自动轮播。具体代码如下：

let sliderWrapper = document.querySelector('.slider-wrapper');

sliderWrapper.addEventListener('mouseover', function() {
  clearInterval(timer);
});

sliderWrapper.addEventListener('mouseout', function() {
  timer = setInterval(slideTo, 2000);
});

在上面的代码中，我们选取了轮播图的外包装元素sliderWrapper，然后添加了鼠标悬浮和鼠标移开事件监听。当鼠标悬浮在图片上时，我们使用clearInterval函数清除了定时器；当鼠标移开时，则重新启动自动轮播。

示例说明

下面是两个示例，在这些示例中，我们使用了另外一种CSS属性transition来实现图片滑动的效果。你可以在代码中尝试使用自定义属性data-*来传递一些变量和参数，并且自己实现点击和自动轮播效果。

示例1：CodePen链接

示例2：CodePen链接