通过滑动控制图片3d（多张视频序列帧图片）展示

Amazon Translator2024-10-28 2:35

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>控制图片变化</title>
<style>
    img {
        max-width: 100%;
        height: auto;
        width: 22vw;
    }
</style>
</head>
<body>

<input class="range" type="range" id="range" min="1" max="49" value="1" step="1">
<img id="image" src="1.png" alt="image">

<script>
    const rangeInput = document.getElementById('range');
    const image = document.getElementById('image');
    const imageUrls = [];

    // 预加载图片
		// 这里是有49张图片 1.png 到 49.png
    for (let i = 1; i <= 49; i++) {
        const imageUrl = `{i}.png`;
        const img = new Image();
        img.src = imageUrl;
        imageUrls.push(img);
    }

    rangeInput.addEventListener('input', function() {
        const value = parseInt(this.value);
        const imageUrl = `${value}.png`;
        image.src = imageUrl;
    });
</script>

</body>
</html>

通过滑动控制 图片3d（多张视频序列帧图片） 展示

通过滑动控制图片3d（多张视频序列帧图片）展示