从网上你可以查到左右方向键对应的keyCode值，这样你就能获取到左右键点击事件了。
然后当左右键点击的时候，触发显示和隐藏对应图片的功能。
图片的显示和隐藏，你可以用js给对应的图片添加显示或者隐藏的css。
这样就能实现你要的效果了
判断一下 是不是小于0或者大于100就可以了呀
if (event.keyCode==37&&(prevpage-1)>0) location=prevpage//向左if (event.keyCode==39&&(prevpage+1)<=100) location=nextpage//向右
<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{ margin:0}
#div{width:100px height:100px background:red position:absolute left:50px bottom:0}
</style>
<script>
window.onload=function ()
{
var oUp=document.getElementById('up')
var oDown=document.getElementById('down')
var oLeft=document.getElementById('left')
var oRight=document.getElementById('right')
var oDiv=document.getElementById('div')
var timer=null
oUp.onmousedown=function ()
{
Move('top')
}
oDown.onmousedown=function ()
{
Move('bottom')
}
oLeft.onmousedown=function ()
{
Move('left')
}
oRight.onmousedown=function ()
{
Move('right')
}
var iSpeed=2//每次移动的距离，可调整
var MoveTime=20//移动间隔时间，可调整
function Move (f)
{
clearInterval(timer)
timer=setInterval(function (){
switch (f)
{
case 'left' :
oDiv.style.left=oDiv.offsetLeft-iSpeed+'px'
break
case 'right' :
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'
break
case 'top' :
oDiv.style.top=oDiv.offsetTop-iSpeed+'px'
break
case 'bottom' :
oDiv.style.top=oDiv.offsetTop+iSpeed+'px'
}
},MoveTime)
}
oUp.onmouseup=oDown.onmouseup=oLeft.onmouseup=oRight.onmouseup=function ()
{
MouseUp ()
}
function MouseUp ()
{
clearInterval(timer)
}
}
</script>
</head>
<body>
<input type="button" value="向上" id="up">
<input type="button" value="向下" id="down">
<input type="button" value="向左" id="left">
<input type="button" value="向右" id="right">
<div id="div"></div>
</body>
</html>
一个比较简单的按钮控制Div的上下左右移动
