手机浏览器中实现上下滚动展示20张图片的代码

答案：

下面是一个简单的HTML示例，使用CSS和JavaScript实现了在手机浏览器中上下加载20张图片的功能。每张图片在手机浏览器中展示时，每屏展示一张图片，并且在上下滚动时，手指向上或向下滑动一次则滚动一次整页，同时有滚动切换的动效。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片滚动展示</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        .container {
            height: 100vh;
            display: flex;
            flex-direction: column;
            transition: transform 0.5s ease;
        }
        .image {
            flex: 0 0 100vh;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>

<div class="container" id="container">
    <!-- 图片将通过JavaScript动态加载 -->
</div>

<script>
    const container = document.getElementById('container');
    const images = [
        'https://via.placeholder.com/800x600?text=Image+1',
        'https://via.placeholder.com/800x600?text=Image+2',
        'https://via.placeholder.com/800x600?text=Image+3',
        'https://via.placeholder.com/800x600?text=Image+4',
        'https://via.placeholder.com/800x600?text=Image+5',
        'https://via.placeholder.com/800x600?text=Image+6',
        'https://via.placeholder.com/800x600?text=Image+7',
        'https://via.placeholder.com/800x600?text=Image+8',
        'https://via.placeholder.com/800x600?text=Image+9',
        'https://via.placeholder.com/800x600?text=Image+10',
        'https://via.placeholder.com/800x600?text=Image+11',
        'https://via.placeholder.com/800x600?text=Image+12',
        'https://via.placeholder.com/800x600?text=Image+13',
        'https://via.placeholder.com/800x600?text=Image+14',
        'https://via.placeholder.com/800x600?text=Image+15',
        'https://via.placeholder.com/800x600?text=Image+16',
        'https://via.placeholder.com/800x600?text=Image+17',
        'https://via.placeholder.com/800x600?text=Image+18',
        'https://via.placeholder.com/800x600?text=Image+19',
        'https://via.placeholder.com/800x600?text=Image+20',
    ];

    let currentIndex = 0;

    function loadImages() {
        images.forEach((src, index) => {
            const div = document.createElement('div');
            div.className = 'image';
            div.style.backgroundImage = `url(${src})`;
            container.appendChild(div);
        });
    }

    function scrollToIndex(index) {
        const offset = -index * window.innerHeight;
        container.style.transform = `translateY(${offset}px)`;
    }

    loadImages();
    scrollToIndex(currentIndex);

    let touchStartY = 0;

    window.addEventListener('touchstart', (event) => {
        touchStartY = event.touches[0].clientY;
    });

    window.addEventListener('touchmove', (event) => {
        const touchEndY = event.touches[0].clientY;
        const deltaY = touchStartY - touchEndY;

        if (Math.abs(deltaY) > 50) {
            if (deltaY > 0 && currentIndex < images.length - 1) {
                currentIndex++;
                scrollToIndex(currentIndex);
            } else if (deltaY < 0 && currentIndex > 0) {
                currentIndex--;
                scrollToIndex(currentIndex);
            }
            touchStartY = touchEndY; // Reset touch start position
        }
    });
</script>

</body>
</html>

代码说明：

HTML结构：包含一个<div>容器用于加载图片。
CSS样式：
- body设置为无边距和隐藏溢出。
- .container设置为100vh的高度，并使用flex布局。
- .image类用于每张图片的样式，确保每张图片占满整个视口。
JavaScript逻辑：
- 定义了20张图片的URL。
- loadImages函数动态加载图片。
- scrollToIndex函数根据当前索引滚动到相应的图片。
- 通过touchstart和touchmove事件监听手指滑动，判断滑动方向并更新当前索引。

使用方法：

将上述代码复制到一个HTML文件中，然后在手机浏览器中打开该文件，即可实现上下滚动查看图片的效果。

手机浏览器中实现上下滚动展示20张图片的代码

使用 GPT-4o Mini 回答，作者 GPT4oMini.app

代码说明：

使用方法：