js图片向上无缝滚动

基础概念

JavaScript 图片向上无缝滚动是一种网页动画效果，通过不断移动图片的位置，使其看起来像是在向上滚动。这种效果通常用于展示一系列图片，例如新闻滚动条、广告轮播等。

类型

简单滚动：图片依次向上移动，到达顶部后重新开始。
无缝滚动：通过复制第一张图片到最后，实现视觉上的无缝衔接。

应用场景

新闻网站：实时更新的新闻标题或摘要。
电商网站：促销广告和产品展示。
社交媒体：动态消息和通知。

示例代码

以下是一个简单的JavaScript图片向上无缝滚动的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片向上无缝滚动</title>
    <style>
        #scrollContainer {
            width: 100%;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        #scrollContent {
            position: absolute;
            width: 100%;
        }
        .scrollItem {
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="scrollContainer">
        <div id="scrollContent">
            <div class="scrollItem">图片1</div>
            <div class="scrollItem">图片2</div>
            <div class="scrollItem">图片3</div>
            <div class="scrollItem">图片4</div>
            <div class="scrollItem">图片5</div>
        </div>
    </div>

    <script>
        function startScroll() {
            const container = document.getElementById('scrollContainer');
            const content = document.getElementById('scrollContent');
            const itemHeight = document.querySelector('.scrollItem').offsetHeight;
            const totalItems = content.children.length;

            // 复制第一项到最后
            const firstItem = content.children[0].cloneNode(true);
            content.appendChild(firstItem);

            let scrollPosition = 0;
            setInterval(() => {
                scrollPosition -= 1; // 向上滚动
                content.style.transform = `translateY(${scrollPosition}px)`;

                // 当第一项完全移出视图时，重置位置
                if (Math.abs(scrollPosition) >= itemHeight) {
                    scrollPosition = 0;
                    content.style.transition = 'none';
                    content.appendChild(content.children[0]);
                    content.style.transition = 'transform 0.5s linear';
                }
            }, 20);
        }

        window.onload = startScroll;
    </script>
</body>
</html>