js样式banner滚动代码

<div class="banner-container">
    <div class="banner-track" id="bannerTrack">
        <div class="banner-item"><img src="image1.jpg" alt="Image 1"></div>
        <div class="banner-item"><img src="image2.jpg" alt="Image 2"></div>
        <div class="banner-item"><img src="image3.jpg" alt="Image 3"></div>
    </div>
</div>

.banner-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.banner-track {
    display: flex;
    animation: scroll 15s linear infinite;
}

.banner-item {
    min-width: 100%;
    box-sizing: border-box;
}

.banner-item img {
    width: 100%;
    display: block;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

document.addEventListener('DOMContentLoaded', function() {
    const track = document.getElementById('bannerTrack');
    const items = track.children;
    let totalItems = items.length;

    // 复制第一项到最后，实现无缝滚动
    const firstItem = items[0].cloneNode(true);
    track.appendChild(firstItem);

    // 调整动画时间以适应项目数量
    const itemWidth = items[0].offsetWidth;
    const duration = (totalItems + 1) * (15 / totalItems); // 假设每个项目展示时间为15秒
    track.style.animationDuration = `${duration}s`;
});