图片轮播js

好的，以下是一个简单的图片轮播的 JavaScript 代码示例：

// 获取轮播图元素和图片列表
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');

// 定义轮播函数
function sliderLoop() {
  // 将第一张图片移到末尾
  slider.appendChild(slides[0]);
  // 设置轮播图的左边距
  slider.style.left = '-' + slides[0].offsetWidth + 'px';
  // 执行动画效果
  setTimeout(function() {
    slider.style.transition = 'left 1s ease-in-out';
    slider.style.left = '0px';
  }, 100);
}

// 每 3 秒调用一次轮播函数
setInterval(sliderLoop, 3000);

这段代码会获取一个类名为 `slider` 的元素和一个类名为 `slide` 的图片列表，然后定义一个 `sliderLoop` 函数用于实现轮播效果。`sliderLoop` 函数会在每 3 秒内移动第一张图片到末尾，并使用 CSS 过渡动画实现图片的滑动效果。最后，使用 `setInterval` 函数来调用 `sliderLoop` 函数以实现持续的轮播效果。您可以将这段代码放入 HTML 文件中的 `<script>` 标签内来运行它。