<!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 = [];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>
