<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>小人快跑</title> <style> #imgs{ position: absolute; left: 100px; top:100px } </style> </head> <body> <img src="img/down-0.png" id="imgs"> </body> <script src="js/xiaorenkuaipao.js"></script> </html> --------------------------以下js--------------------------- var imgs=document.querySelector('#imgs') var index=-1 function fn(ns){ index++ if(index==5){ index=0 } imgs.src="img/"+ns+"-"+index+".png" } document.onkeydown=function(e){ var e=window.event; // alert(e.keyCode) switch(e.keyCode){ case 37: imgs.style.left=imgs.offsetLeft-10+'px' fn("left") break; case 38: imgs.style.top=imgs.offsetTop-10+'px' fn("up") break; case 39: imgs.style.left=imgs.offsetLeft+10+'px' fn("right") break; case 40: imgs.style.top=imgs.offsetTop+10+'px' fn("down") break; } }