如何实现无重置的Logo循环轮播？

我正在为项目网站制作一个Logo轮播组件，希望轮播不会停止并重置，而是实现Logo的持续循环播放。

当前效果：
开始 | 1 | 2 | 3 | 4 | 5 | 6 | 停止并重置回1
（数字代表Logo）

期望效果：
开始 | 1 | 2 | 3 | 4 | 5 | 6 | 1 | 2 | 3 | 4 | 5 | 6 | 1 | 2 | 3 | 4 | 5 | 6 | …
（持续循环无重置）

核心思路是在列表中复制一组相同的Logo，让动画滚动时，第一组完全移出视野的瞬间，第二组刚好衔接上，视觉上消除重置断层。同时调整容器样式和动画参数：

修改后的HTML代码 #

在<ul>内复制一份所有Logo项，形成两组完全相同的内容：

<div class="slider789">
    <ul>
        <!-- 第一组Logo -->
        <li>
            <img src="https://kelmass.com/wp-content/uploads/2021/08/spring-boot-logo.png" alt="Spring Boot Logo">
        </li>
        <li>
            <img src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png" alt="JavaScript Logo">
        </li>
        <li>
            <img src="https://download.logo.wine/logo/Amazon_Web_Services/Amazon_Web_Services-Logo.wine.png" alt="AWS Logo">
        </li>
        <!-- 复制的第二组Logo -->
        <li>
            <img src="https://kelmass.com/wp-content/uploads/2021/08/spring-boot-logo.png" alt="Spring Boot Logo">
        </li>
        <li>
            <img src="https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png" alt="JavaScript Logo">
        </li>
        <li>
            <img src="https://download.logo.wine/logo/Amazon_Web_Services/Amazon_Web_Services-Logo.wine.png" alt="AWS Logo">
        </li>
    </ul>
</div>

修改后的CSS代码 #

1. 容器设置overflow: hidden隐藏超出部分
2. 列表宽度设为200%（容纳两组Logo）
3. 动画滚动距离调整为-50%（刚好滚动一组Logo的宽度）

.slider789 {
    width: 100%; /* 改为响应式宽度，可按需调整 */
    margin: auto;
    overflow: hidden; /* 隐藏容器外的内容 */
}
.slider789 ul {
    display: flex;
    padding: 0;
    margin: 0;
    animation: cambio 30s infinite linear; /* 可自定义动画时长 */
    width: 200%; /* 两组Logo总宽度为原宽度的2倍 */
}
.slider789 li {
    padding: 0 20px;
    list-style: none;
    flex-shrink: 0; /* 防止Logo项被压缩变形 */
    width: calc(100% / 3); /* 每组3个Logo，每个占1/3宽度，需根据实际数量调整 */
}
.slider789 img {
    max-width: 100%;
    height: 100px;
    object-fit: contain; /* 保持Logo比例 */
}
@keyframes cambio {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); } /* 滚动距离等于一组Logo的宽度 */
}

关键说明 #

• 复制Logo项是实现无缝的核心，当第一组Logo完全滚出容器，第二组刚好填充到原位置，视觉上没有中断感
• 动画滚动-50%而非-100%，因为列表总宽度是200%，滚动一半刚好完成一组的切换，结合infinite属性实现持续循环
• flex-shrink: 0确保Logo项不会被压缩，保持原有尺寸比例

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