我有这个代码写起来，我的问题是移动滑块与箭头键，它的工作，如果我先点击滑块，但我希望它在页面加载工作，而不必先点击滑块，我不知道如何实现这一点。
<script>
function updateImage(sliderValue) {
document.getElementById("image").src =
"img"
+ sliderValue + ".png";
}
document.getElementById('slider').addEventListener(function() {
this.focus();
});
</script>
<div class="slider-container">
<input type="range" min="0" max="384" value="0" step="6"
oninput="updateImage(this.value)" id="slider"/>
</div>
<img id="image" src="img.png" width="1144" height="898">
在文档上添加keydown侦听器，该侦听器检查事件键代码(从中确定按下的键)，并相应地更改滑块值:
document.addEventListener('keydown', function(e) {
if (e.keyCode == 39) { //right
slider.value = +slider.value + +slider.step;
} else if (e.keyCode == 37) { //left
slider.value = +slider.value - +slider.step;
}
updateImage(slider.value)
})
function updateImage(sliderValue) {
console.log(sliderValue)
document.getElementById("image").src =
"img" +
sliderValue + ".png";
}<div class="slider-container">
<input type="range" min="0" max="400" value="384" step="6" id="slider" oninput="updateImage(this.value)" />
</div>
<img id="image" src="img.png">第一件事，你可以用两种不同的方式来完成你的工作，一种是简单的，但不是完全主动的，第二种是伟大的，但更复杂:
第一种方式:
您可以为窗口添加onload事件，当窗口加载时，您可以将焦点放在滑块输入上，这将使使用箭头键左右移动幻灯片成为可能。而不是说:
document.getElementById('slider').addEventListener(function() {
this.focus();
});
你可以说:
window.onload = function() {
document.getElementById("slider").focus()
}
当窗口加载完成时，这将把焦点直接放在你的输入上。
这是使用箭头按钮来导航滑块的简单方法，但是还有一种更高级的方法可以做到这一点。
第二种方式:
你可以再次在窗口本身上使用keyEvents，但不是将焦点推到输入范围，你将使用它来获取被点击的东西，无论在哪里，如果被点击的按钮是箭头左或右按钮之一，增加或减少滑动条的值，并运行带有新值的updateImage这是你需要放在updateImage函数后面的代码:
window.addEventListener("keydown", (e) => {
let slider = document.getElementById("slider")
if( e.key === "ArrowLeft" ) {
e.preventDefault()
slider.value -= 1
updateImage(slider.value)
}
else if( e.key === "ArrowRight" ) {
e.preventDefault()
slider.value = Number(slider.value) + 1
updateImage(slider.value)
}
})
在这段代码中，您将发现无论在哪里，只要在窗口中发生keydown事件，我就应用该函数。在函数内部，我得到了滑块，然后检查左键和右键，在这两个条件中，我阻止了按钮的默认动作，但是你可以删除这一部分，然后我增加或减少滑块值1，"在你的例子中，增加或删除6，因为你将步长设置为6">，然后我用新值updateImage mySelf，这是因为改变javascript的输入值不会运行附加到输入的oninput事件。现在，你可以点击左右箭头，而你甚至不关注输入，图像仍然会改变，滑动条本身仍然会改变。
我希望我能解决你的问题。
我来解决你的问题。
const slider = document.getElementById('slider');
slider.addEventListener(e => {
switch(e.key) {
case "ArrowLeft":
// Left arrow logic
break;
case "ArrowRight":
// Right arrow logic
break;
}
});