JavaScript代码实现图片循环滚动效果

下面是JavaScript代码实现图片循环滚动效果的完整攻略：

制作图片循环滚动效果步骤

1. HTML结构搭建

首先需要搭建包含图片的 HTML 结构，建议使用 ul 和 li 标签，ul 标签设定一个固定的宽度，使其中的 li 标签横向排列。

<!-- HTML结构 -->
<div class="container">
  <ul class="img_list">
    <li><img src="image1.jpg" alt=""></li>
    <li><img src="image2.jpg" alt=""></li>
    <li><img src="image3.jpg" alt=""></li>
    <!-- 在此可以继续添加 li 元素 -->
  </ul>
</div>

2. CSS样式设置

接着要对 HTML 中的图片进行样式设置，让图片一排横向排列，并去掉列表的默认样式，同时将其宽度和高度都设为固定数值。并在 .container 中设置隐藏溢出的元素和悬停时停止轮播的效果。

/* CSS样式 */
.container {
  width: 500px;
  overflow: hidden;
  position: relative; /* 为了使停止轮播的按钮能绝对定位在 `.container` 内部 */
}

.img_list {
  list-style: none;
  width: 3000px; /* 此处将宽度设为所有图片宽度的和 */
  overflow: hidden;
  margin: 0 auto; /* 垂直居中 */
}

.img_list li {
  float: left; /* 确保元素在同一行内，横向排列 */
  width: 500px;
  height: 300px; /* 此处可根据实际情况设定 */
}

.stop-btn {
  position: absolute;
  bottom: 10px;
  right: 25px;
  cursor: pointer;
  /* 其它样式，例如字体大小、颜色等 */
}

3. JavaScript 实现滚动效果

最后，要加入 JavaScript 代码，通过控制图片的 left 属性来实现滚动效果。首先需要定义一个 index 计数器来保持轮播顺序，然后使用 setInterval() 方法来定时切换图片。注意，在最后一张图片轮播后，需要再次返回到第一张图片循环滚动。

// JavaScript代码
const container = document.querySelector('.container');
const imgList = document.querySelector('.img_list');
let index = 1; // 设置初始值为 1，因为第一张图片已经显示
let timer = null;

// 定时轮播函数
function play() {
  timer = setInterval(() => {
    index++;

    // 超出图片数量时，重新回到第一张图片
    if (index > 3) {
      index = 1;
    }

    const left = index * -500; // 计算对应的 `left` 属性值
    imgList.style.left = `${left}px`;
  }, 2000); // 设定切换图片时间间隔为 2000ms
}

play(); // 最开始调用一次

// 鼠标悬停到轮播图片上时停止轮播
container.addEventListener('mouseenter', () => {
  clearInterval(timer);
});

// 鼠标从轮播图片上移开时再次开始轮播
container.addEventListener('mouseleave', () => {
  play();
});

示例说明

示例一

我们想要实现每 3 秒钟轮播一次图片的效果，代码如下：

const container = document.querySelector('.container');
const imgList = document.querySelector('.img_list');
let index = 1; // 设置初始值为 1，因为第一张图片已经显示

setInterval(() => {
  index++;

  // 超出图片数量时，重新回到第一张图片
  if (index > 3) {
    index = 1;
  }

  const left = index * -500; // 计算对应的 `left` 属性值
  imgList.style.left = `${left}px`;
}, 3000); // 设定切换图片时间间隔为 3000 ms

示例二

我们考虑加入一个停止轮播的按钮，点击后轮播停止；再次点击后，轮播继续，具体代码如下：

const container = document.querySelector('.container');
const imgList = document.querySelector('.img_list');
const stopBtn = document.querySelector('.stop-btn');
let index = 1; // 设置初始值为 1，因为第一张图片已经显示
let timer = null;

// 定时轮播函数
function play() {
  timer = setInterval(() => {
    index++;

    // 超出图片数量时，重新回到第一张图片
    if (index > 3) {
      index = 1;
    }

    const left = index * -500; // 计算对应的 `left` 属性值
    imgList.style.left = `${left}px`;
  }, 2000); // 设定切换图片时间间隔为 2000ms
}

play(); // 最开始调用一次

// 点击按钮停止轮播
stopBtn.addEventListener('click', () => {
  if (stopBtn.innerHTML === '停止轮播') {
    clearInterval(timer);
    stopBtn.innerHTML = '继续轮播';
  } else {
    play(); // 继续轮播
    stopBtn.innerHTML = '停止轮播';
  }
});

// 鼠标悬停到轮播图片上时停止轮播
container.addEventListener('mouseenter', () => {
  clearInterval(timer);
});

// 鼠标从轮播图片上移开时再次开始轮播
container.addEventListener('mouseleave', () => {
  play();
});

到此为止，完整的JavaScript代码实现了图片循环滚动效果，并且还加入了停止轮播的功能。