js实现图片上下滚动

要实现图片的上下滚动效果，可以使用JavaScript结合CSS来完成。以下是一个简单的示例，展示了如何使用原生JavaScript和CSS来实现这一效果。

基础概念

JavaScript: 一种脚本语言，用于创建动态网页内容和交互效果。
CSS: 层叠样式表，用于描述HTML文档的样式。
定时器: JavaScript中的setInterval函数可以用来周期性地执行代码。

实现步骤

HTML结构: 创建一个容器来包含滚动的图片。
CSS样式: 设置容器和图片的样式，包括位置、大小等。
JavaScript逻辑: 使用定时器来不断改变图片的位置，从而实现滚动效果。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上下滚动</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scroll-container">
        <img src="image1.jpg" alt="Image 1" class="scrolling-image">
        <img src="image2.jpg" alt="Image 2" class="scrolling-image">
        <img src="image3.jpg" alt="Image 3" class="scrolling-image">
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.scroll-container {
    width: 80%;
    overflow: hidden;
    position: relative;
}

.scrolling-image {
    width: 100%;
    display: block;
    position: absolute;
    transition: top 0.5s ease-in-out;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.scroll-container');
    const images = document.querySelectorAll('.scrolling-image');
    let currentIndex = 0;

    function scrollImages() {
        images.forEach((img, index) => {
            if (index === currentIndex) {
                img.style.top = '0';
            } else {
                img.style.top = '-100%';
            }
        });

        currentIndex = (currentIndex + 1) % images.length;
    }

    setInterval(scrollImages, 3000); // 每3秒滚动一次
});