手写原生无缝滚动(列表)

先看效果图

原理：点击后让列表的父盒子进行平移，平移至最后一个元素时不进行移动

html代码 

<div class="sc-list">
    <div class="sc-list-main">
        <ul class="flex-box ai-center"> // 父盒子设置为flex，并添加 align-item:center;
            <li>
                <div>
                    <img src="" alt="">
                </div>
            </li>
            <li>
                <div>
                    <img src="" alt="">
                </div>
            </li>
            <li>
                <div>
                    <img src="" alt="">
                </div>
            </li>
            <li>
                <div>
                    <img src="" alt="">
                </div>
            </li>
            <li>
                <div>
                    <img src="" alt="">
                </div>
            </li>
            <li>
                <div>
                    <img src="" alt="">
                </div>
            </li>
        </ul>
    </div>
    //左右点击按钮，可以自行调整位置
    <div class="sc-list-btn-left"><img src="" alt=""></div> 
    <div class="sc-list-btn-right"><img src="" alt=""></div>
</div>

css代码：

.sc-list {
    width: 100%;
    position: relative;
}
.sc-list .sc-list-main ul li {
    width: 276px;
    height: 276px;
    margin-right: 32px;
}
.sc-list .sc-list-main ul li:last-of-type {
    margin-right: 0; //去除最后一个li的右外边距，以确保位移的准确
}
.sc-list .sc-list-main ul li  img {
    width: 276px;
    height: 276px;
}
// 左右按钮  可根据自己需要调整位置
.sc-list .sc-list-btn-left,.sc-list .sc-list-btn-right {
    position: absolute;
    top: calc(50% - 30px);
    left: 0;
    width: 30px;
    height: 60px;
    line-height:60px;
    text-align:center;
    background: #000000;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    opacity: 0.32;
}

.sc-list .sc-list-btn-right {
    right: 0;
}

.sc-list .sc-list-btn-left img, .sc-list .sc-list-btn-right img {
    width: 15px;
    height: 30px;
}

 js代码

let stuFlag = true; // 节流阀，防止连续点击
let stuCaseIndex = 0; // 起始位置
// 进行位移的函数
function changeStuCase(num) {
    stuFlag = false;

    $('.sc-list-main ul').animate({
        marginLeft: -num * 308 + 'px'; //这里的308代表每一个li的宽度(包括margin-right)  负号向左位移
    }, function () {
        stuFlag = true;
    })
}
// 左侧按钮
$('.sc-list-btn-left').click(function () {
    if (stuCaseIndex > 0 && stuFlag == true) {
        stuCaseIndex--;
        changeStuCase(stuCaseIndex);
    }
})
//右侧按钮
$('.sc-list-btn-right').click(function () {
    // $('.sc-list-main ul li').length - 4    这里的4代表显示出来的内容数量
    // 如果你需要显示的数量不是4，就需要自己调整下相应的样式，并将这里的4改为你指定的数量
    if (stuCaseIndex < $('.sc-list-main ul li').length - 4 && stuFlag == true) {
        stuCaseIndex++;
        changeStuCase(stuCaseIndex);
    }
})