知识问答

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

发布时间：2026-05-10 00:03:13 浏览量：0

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

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

1. HTML结构搭建

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

<!-- HTML结构 --><p 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></p>

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代码实现了图片循环滚动效果，并且还加入了停止轮播的功能。