求助：用最少JavaScript（或纯HTML/CSS）实现无缝循环图片轮播

我太懂你这种想尽量少用JS的心情了——毕竟JS加载慢不说，咱主要熟悉HTML/CSS的话，复杂的JS逻辑和插件确实容易卡壳。你现在的JS版本功能是对的，但可以再轻量化一些，另外我还准备了纯CSS的方案（如果能接受自动轮播的话，完全无JS），两种都给你整理好：

方案一：极简JavaScript版本（保留手动箭头控制，无缝循环） #

这个版本简化了原有的JS逻辑，去掉了不必要的状态变量，核心思路还是克隆首尾图片实现无缝过渡，但代码更短、加载更快：

HTML部分 #

<div class="slideshow-container">
  <button class="arrow left" data-direction="prev">&#10094;</button>
  <button class="arrow right" data-direction="next">&#10095;</button>
  <div class="slides-wrapper" id="slides-wrapper">
    <!-- 克隆的首尾图片和真实图片会在这里插入 -->
  </div>
</div>

CSS部分（和你原有代码对齐，仅微调细节） #

.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 2000px;
  overflow: hidden;
  margin-top: -200px;
  visibility: hidden;
}
.slideshow-container.ready {
  visibility: visible;
}
.slides-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.slide {
  width: 70%;
  margin: 0 15px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  user-select: none;
  z-index: 2;
  border: none;
  border-radius: 6px;
}
.arrow.left {
  left: 10px;
}
.arrow.right {
  right: 10px;
}

极简JavaScript部分（比你原有代码精简一半） #

// 图片数组
const imageUrls = [
  'https://picsum.photos/id/1015/800/400',
  'https://picsum.photos/id/1016/800/400',
  'https://picsum.photos/id/1018/800/400',
  'https://picsum.photos/id/1020/800/400'
];
const wrapper = document.getElementById('slides-wrapper');
let currentIndex = 1; // 从克隆的最后一张图的下一张开始（即第一张真实图）

// 初始化：克隆首尾图片，实现无缝循环
function initSlides() {
  // 拼接成 [最后一张, 所有真实图, 第一张] 的数组
  const allSlides = [imageUrls.at(-1), ...imageUrls, imageUrls[0]];
  allSlides.forEach(url => {
    const slide = document.createElement('div');
    slide.className = 'slide';
    slide.innerHTML = `<img src="${url}" alt="轮播图片">`;
    wrapper.appendChild(slide);
  });
  // 初始定位到第一张真实图
  updatePosition(true);
  // 显示容器
  document.querySelector('.slideshow-container').classList.add('ready');
}

// 更新轮播位置
function updatePosition(skipTransition = false) {
  const slideWidth = document.querySelector('.slide').offsetWidth + 30; // 图片宽度+间距
  const containerWidth = document.querySelector('.slideshow-container').offsetWidth;
  const offset = slideWidth * currentIndex;
  // 控制是否启用过渡动画
  wrapper.style.transition = skipTransition ? 'none' : 'transform 0.5s ease-in-out';
  wrapper.style.transform = `translateX(${containerWidth / 2 - offset - slideWidth / 2}px)`;
}

// 切换图片
function changeSlide(direction) {
  // 防止快速点击触发多次过渡
  if (!wrapper.style.transition.includes('0.5s')) return;
  currentIndex += direction;
  updatePosition();
}

// 过渡结束后处理无缝跳转
wrapper.addEventListener('transitionend', () => {
  if (currentIndex === 0) {
    currentIndex = imageUrls.length;
    updatePosition(true);
  } else if (currentIndex === imageUrls.length + 1) {
    currentIndex = 1;
    updatePosition(true);
  }
});

// 绑定箭头点击事件
document.querySelectorAll('.arrow').forEach(btn => {
  btn.addEventListener('click', () => {
    changeSlide(btn.dataset.direction === 'next' ? 1 : -1);
  });
});

// 窗口大小改变时更新位置
window.addEventListener('resize', () => updatePosition(true));

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initSlides);

这个版本做了这些精简：

• 去掉了冗余的slides数组和allowTransition变量，用CSS过渡状态判断点击有效性
• 用imageUrls.at(-1)替代索引写法，代码更简洁
• 把图片创建逻辑简化为innerHTML，减少DOM操作步骤
• 箭头事件批量绑定，避免重复代码

方案二：纯CSS无缝轮播（完全无JavaScript，适合自动轮播场景） #

如果你不需要手动箭头控制，只想实现自动无限循环的轮播，纯CSS就能搞定，完全不会拖慢页面加载：

HTML部分 #

<div class="css-slideshow">
  <div class="css-slides">
    <!-- 重复两次图片数组，实现无缝循环的视觉效果 -->
    <div class="css-slide">
      <img src="https://picsum.photos/id/1015/800/400" alt="轮播图1">
    </div>
    <div class="css-slide">
      <img src="https://picsum.photos/id/1016/800/400" alt="轮播图2">
    </div>
    <div class="css-slide">
      <img src="https://picsum.photos/id/1018/800/400" alt="轮播图3">
    </div>
    <div class="css-slide">
      <img src="https://picsum.photos/id/1020/800/400" alt="轮播图4">
    </div>
    <!-- 重复一次图片，实现无缝 -->
    <div class="css-slide">
      <img src="https://picsum.photos/id/1015/800/400" alt="轮播图1">
    </div>
    <div class="css-slide">
      <img src="https://picsum.photos/id/1016/800/400" alt="轮播图2">
    </div>
    <div class="css-slide">
      <img src="https://picsum.photos/id/1018/800/400" alt="轮播图3">
    </div>
    <div class="css-slide">
      <img src="https://picsum.photos/id/1020/800/400" alt="轮播图4">
    </div>
  </div>
</div>

CSS部分 #

.css-slideshow {
  position: relative;
  width: 100%;
  max-width: 2000px;
  overflow: hidden;
  margin-top: -200px;
}
.css-slides {
  display: flex;
  /* 动画：16秒完成8张图的滚动，无限循环，线性速度 */
  animation: slide 16s linear infinite;
}
.css-slide {
  width: 70%;
  margin: 0 15px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.css-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
/* 鼠标悬停时暂停动画 */
.css-slideshow:hover .css-slides {
  animation-play-state: paused;
}
/* 关键帧动画：移动整个轮播容器 */
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 移动一半的距离（因为我们重复了两次图片） */
}

这个纯CSS方案完全不需要JS，加载速度最快，还支持鼠标悬停暂停。唯一的缺点是没法用箭头手动控制，如果需要手动控制的话，还是用第一个极简JS方案更合适。

另外关于你提到的Slick Slider，如果你之后还是想尝试的话，可以先从最基础的配置开始：

$('.your-slider').slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  prevArrow: $('.arrow.left'),
  nextArrow: $('.arrow.right')
});

先把基础的无限循环跑起来，再慢慢调整样式和其他配置，这样会容易很多。

内容来源于stack exchange