如何使用JavaScript实现div内图片向下无限循环效果？

实现代码 #

你可以直接在现有代码基础上添加如下JavaScript代码即可实现3张图片无限循环效果，如需添加图片最多可再加2张到imgList数组中：

// 配置项：图片路径数组，最多可添加至5个路径
const imgList = [
  'images/car1.jpg',
  'images/car2.jpg',
  'images/car3.jpg'
]
// 配置项：轮播切换间隔，单位毫秒，2000即2秒
const SWITCH_INTERVAL = 2000

const carImages = document.querySelectorAll('.car')

function runLoop() {
  setInterval(() => {
    // 取出数组首位元素放到末尾，实现循环移位
    imgList.push(imgList.shift())
    // 更新页面上所有图片的src
    carImages.forEach((img, idx) => img.src = imgList[idx])
  }, SWITCH_INTERVAL)
}

// 页面资源加载完成后启动轮播
window.onload = runLoop

如果你想要更自然的切换过渡效果，可以在你现有CSS的img样式中添加过渡属性：

img {
  width: 200px;
  height: 200px;
  /* 新增过渡效果，0.3秒完成透明度变化 */
  transition: opacity 0.3s ease-in-out;
}

内容的提问来源于stack exchange，提问作者user17561422