JavaScript轮播图图片无法滑动问题求助（自定义实现）

核心问题原因 #

你的代码无法让图片滑动的关键原因有两个：

1. <li>元素未设置定位：默认情况下元素是position: static，此时设置left属性不会产生任何效果，因为该属性仅对relative/absolute/fixed/sticky定位的元素生效。
2. 错误的滑动目标：尝试逐个移动每个<li>元素效率低下且不符合轮播图的常规实现逻辑，正确的做法是移动包含所有图片的父容器（<ul>），一次性带动所有图片滑动。

修复步骤 #

1. 给容器添加溢出隐藏：让轮播容器只显示可视区域内的图片，超出部分隐藏。
2. 调整滑动逻辑：将滑动目标改为<ul>，通过修改其left属性实现整体滑动。
3. 计算正确的滑动距离：每张图片（含内边距）的总宽度为140px（130px图片宽度 + 左右各5px padding），每次点击向右按钮时将<ul>的左偏移量减少这个值。

修正后的完整代码 #

HTML

<button class="arrow next">⇨</button>

<div id='container'> 
  <ul>
    <li><img src="https://via.placeholder.com/130"></li>
    <li><img src="https://via.placeholder.com/130"></li>
    <li><img src="https://via.placeholder.com/130"></li>
    <li><img src="https://via.placeholder.com/130"></li>
    <li><img src="https://via.placeholder.com/130"></li>
    <li><img src="https://via.placeholder.com/130"></li>
  </ul>
</div>

CSS

.arrow {
  padding: 0;
  background: #ddd;
  border-radius: 15px;
  border: 1px solid gray;
  font-size: 24px;
  line-height: 24px;
  color: #444;
  display: block;
}

.arrow:focus {
  outline: none;
}

.arrow:hover {
  background: #ccc;
  cursor: pointer;
}

ul {
  position:absolute;
  height: 130px;
  width: 9999px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0;
  left : 5px;
  top:10px;
}

ul img {
  width: 130px;
  height: 130px;
  display: block; 
  padding:5px;
}

ul li {
  display: inline-block; 
}

#container{
  position : relative;
  width:430px;
  height:150px;
  background-color: red;
  overflow: hidden; /* 添加溢出隐藏 */
}

JavaScript

let carousel = document.querySelector('ul');
let nextArrow = document.querySelector('.next')

const slideWidth = 140; // 单张图片的总宽度（含padding）

let move = {
  toRight(e){
    // 获取当前<ul>的左偏移量，优先取内联样式，否则取计算后的CSS值
    let currentLeft = parseInt(carousel.style.left) || parseInt(window.getComputedStyle(carousel).left);
    // 计算新的左偏移量
    let newPosition = currentLeft - slideWidth;
    // 应用新位置
    carousel.style.left = newPosition + 'px';
  }
}

nextArrow.addEventListener('click', move.toRight);

额外优化建议 #

• 可以添加边界判断，防止滑动超出图片总数的范围。
• 可以添加过渡动画，让滑动更平滑（给<ul>添加transition: left 0.3s ease）。

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