JavaScript实现margin步进不等宽轮播图的代码排查

排查到的具体错误 #

CSS部分 #

• 类名不匹配：HTML中图片元素class为img，但CSS中编写的样式选择器为.imgs，导致图片高度、边距、圆角样式完全未生效
• 轮播轨道宽度限制：.images轮播轨道设置了width: 100%，flex布局下轨道宽度被限制为父容器宽度，无法将所有不等宽图片横向排列在一行
• 弹性项压缩问题：未给图片外层容器、图片本身设置flex-shrink: 0，flex布局下图片会被强制压缩变形，宽度不符合预设值

JavaScript部分 #

• 事件绑定语法错误：上一张按钮调用addEventListener时缺失第一个事件类型参数"click"，导致上一张按钮点击完全无响应
• 位移属性使用错误：右移（下一张）逻辑错误操作marginRight属性，flex横向布局下修改该属性无法实现轨道横向位移，统一操作marginLeft才能实现横向移动
• 位移计算逻辑错误：每次点击直接给margin属性赋值单张图宽度，没有在原有margin值基础上累加/累减，无法实现连续滑动
• 计数逻辑错误：
  • 边界判断写为count < 40，与实际10张图片的数量完全不符，会出现数组越界报错
  • 上一张按钮逻辑错误复用右移函数、递增count值，点击后不会回退反而继续右移
• 移动方向逻辑错误：下一张切换时轨道需要向左移动，对应marginLeft为负值累加；上一张切换时轨道向右回退，对应marginLeft为正值累加，原代码方向完全写反

修正后可运行代码 #

严格满足要求：仅通过修改margin属性实现位移、每次位移值等于对应图片宽度

HTML代码 #

<div class="container" style="display: flex; align-items: center;">
    <img src="./previous.png" alt="上一张" class="previous">
    <div class="frame">
        <div class="carousel">
            <div class="images">
                <div><img class="img" src="./images/avatar_1.png" alt="" width="50px"></div>
                <div><img class="img" src="./images/avatar_2.png" alt="" width="100px"></div>
                <div><img class="img" src="./images/avatar_3.png" alt="" width="150px"></div>
                <div><img class="img" src="./images/avatar_4.png" alt="" width="100px"></div>
                <div><img class="img" src="./images/avatar_5.png" alt="" width="200px"></div>
                <div><img class="img" src="./images/avatar_6.png" alt="" width="100px"></div>
                <div><img class="img" src="./images/avatar_7.png" alt="" width="140px"></div>
                <div><img class="img" src="./images/avatar_8.png" alt="" width="180px"></div>
                <div><img class="img" src="./images/avatar_9.png" alt="" width="190px"></div>
                <div><img class="img" src="./images/avatar_10.png" alt="" width="100px"></div>
            </div>
        </div>
    </div>
    <img src="./next.png" alt="下一张" class="next">
</div>

注：给.container加了flex布局样式让左右按钮和轮播框水平对齐，可根据自身设计调整

CSS代码 #

.frame {
    width: 350px;
    height: 150px;
    overflow: hidden;
    margin: 0px 20px;
    border-radius: 10px;
}
.carousel {
    overflow: hidden;
    background-color: rgb(100, 98, 98);
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100%;
    height: 100%;
}
.images {
    display: flex;
    position: relative;
    /* 取消宽度100%限制，宽度自适应内容，容纳所有图片 */
    width: fit-content;
    height: 100%;
    /* 初始左边距为0 */
    margin-left: 0;
}
.images > div {
    /* 防止图片外层容器被压缩 */
    flex-shrink: 0;
}
/* 修正类名匹配 */
.img {
    height: 130px;
    margin: 10px 0px 10px 10px;
    border-radius: 5px;
    /* 防止图片被压缩 */
    flex-shrink: 0;
    display: block;
}

JavaScript代码 #

let images = document.querySelector(".images")
let next = document.querySelector(".next")
let previous = document.querySelector(".previous")
let img = document.querySelectorAll(".img")
// count代表当前最左侧显示的图片索引
let count = 0

// 下一张点击事件
next.addEventListener("click", function() {
    // 边界判断：到最后一张时停止右滑
    if (count >= img.length - 1) return
    // 取当前最左侧图片的宽度，作为本次位移的距离
    let moveDistance = img[count].width
    // 修改marginLeft实现左移，每次位移值严格等于对应图片宽度
    images.style.marginLeft = `${parseFloat(images.style.marginLeft) - moveDistance}px`
    count++
})

// 上一张点击事件，补全缺失的click事件类型
previous.addEventListener("click", function() {
    // 边界判断：到第一张时停止左滑
    if (count <= 0) return
    count--
    // 取当前要滑回的图片宽度，作为本次位移的距离
    let moveDistance = img[count].width
    // 修改marginLeft实现右移，每次位移值严格等于对应图片宽度
    images.style.marginLeft = `${parseFloat(images.style.marginLeft) + moveDistance}px`
})

实现说明 #

• 所有位移完全通过修改.images容器的margin-left属性实现，未使用transform、scrollLeft等其他方式
• 每次点击按钮的位移距离完全等于当前要滑过/滑回的图片宽度，严格匹配需求
• 增加了首尾边界判断，滑到第一张/最后一张时自动停止，不会出现空白区域

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