var lis = document.getElementById("ul1").children; var now = 0;
document.onkeydown = function(ev){ var oEvent = ev || event;
switch(oEvent.keyCode){ //左键 case 37: now --; if(now < 0){ now =0; } break; //上键 case 38: now -= 3; if(now < 0){ now += 3; } break; //右键 case 39: now ++; if(now >= lis.length){ now =lis.length - 1; } break; //下键 case 40: now += 3; if(now >= lis.length){ now -= 3; } break; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
img{display:block;width:130px;height:90px;margin-bottom:10px;margin-left:4px;}
.on{border:4px solid #f30;margin-left:0;}
</style>
</head>
<body>
<div id="box">
<img class="on" src="http://img4.cache.netease.com/sports/2014/6/17/20140617060017a885f.jpg" alt="" />
<img src="http://img4.cache.netease.com/sports/2014/6/17/20140617060017a885f.jpg" alt="" />
<img src="http://img4.cache.netease.com/sports/2014/6/17/20140617060017a885f.jpg" alt="" />
<img src="http://img4.cache.netease.com/sports/2014/6/17/20140617060017a885f.jpg" alt="" />
<img src="http://img4.cache.netease.com/sports/2014/6/17/20140617060017a885f.jpg" alt="" />
</div>
<script>
var aImg = document.getElementById("box").getElementsByTagName("img");
var iNow=0;
window.onkeydown=function(ev){
var oEv = ev || event;
if(oEv.keyCode == 40){ //下箭头
iNow++;
if(iNow>=aImg.length){
iNow = 0;
}
for(var i=0; i<aImg.length; i++){
aImg[i].className="";
}
aImg[iNow].className="on";
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; border:0;}
.wrap{ width:390px; height:auto; margin:0 auto;}
.wrap ul{ margin:0 -15px -20px 0;}
.wrap ul li{ float:left; width:118px; height:118px; margin-right:15px; margin-bottom:20px; list-style:none; overflow:hidden; border:1px #FFF solid;}
.wrap ul li.now{ border:1px #F00 solid;}
</style>
</head><body>
<div class="wrap">
<ul id="ul1">
<li class="now"><img src="cat/cat1.jpg" /></li>
<li><img src="cat/cat2.jpg" /></li>
<li><img src="cat/cat3.jpg" /></li>
<li><img src="cat/cat3.jpg" /></li>
</ul></div><script>
window.onload = function(){
var lis = document.getElementById("ul1").children;
var now = 0;
document.onkeydown = function(ev){
var oEvent = ev || event;
switch(oEvent.keyCode){
//左键
case 37:
now --;
if(now < 0){
now =0;
}
break;
//上键
case 38:
now -= 3;
if(now < 0){
now += 3;
}
break;
//右键
case 39:
now ++;
if(now >= lis.length){
now =lis.length - 1;
}
break;
//下键
case 40:
now += 3;
if(now >= lis.length){
now -= 3;
}
break;
}
for(i=0; i < lis.length ; i++){
lis[i].className = "";
if(i == now){
lis[i].className = "now";
}
}
}
}
</script></body>
</html>