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>