键盘上下，左右切换效果

星
期       中央一台       节目1
一二       中央二台       节目2三       中央三台       节目3四       中央四台       节目4五       中央五台       节目5六       中央六台       节目6日       中央七台       节目7
         。       需求：
1.一开始进入默认选择第二个台，不一定是中央二台。选中的颜色为红色背景。
2.默认显示当前系统星期。
3.按键盘右键选择节目栏目，选中节目栏目背景色为红色，左边的选中的台需要变成灰色。
4.频道不止7个，可能是100个，1000个，假如选择到了第7个台，那么继续往前会将台号显示出来。而前面的则会移动上去，但是显示还是7个台。假如去到最后一个台，再向下则返回第一个台，且焦点落在第一个台。假如向上到达了第一个台，那么焦点将会移动到最后一个台，焦点落在最后一个台上。请高手设计一下效果。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

你最好写个html结构出来，看你这个图根本没明白你要怎么搞。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.liFocus {
color:red;
}
.liFocus a {
color:red;
}
a {
text-decoration:none;
color:#000;
}
.week {
width:100px;
display:inline-block;
}
li a {
width:100px;
display:inline-block;
}
.program {
width:100px;
display:inline-block;
}
</style>
</head>
<body>
<ul>
<li style="display:none;">
<span class="week"></span>
<a href="javascript:;" class=""></a>
<span class="program"></span>
</li>
</ul>
<script type="text/javascript" src="file:///F|/workspace/jquery-1.7.min.js"></script>
<script type="text/javascript">
/*
param:tv -- 所有的电视台
*/
//如果有更多的电视台可以添加到tv里面
var tv = ['中央一台','中央二台','中央三台','中央四台','中央五台','中央六台'
,'中央七台','中央八台','中央九台','中央十台','中央十一台','中央十二台'
,'中央十三台','中央十四台','中央十五台','江苏卫视','东南卫视','重庆卫视'
,'CQTV-1','CQTV-2','CQTV-3','CQTV-4','CQTV-5','CQTV-6','CQTV-7'
,'CQTV-8','湖北卫视','山西卫视','陕西卫视','广西卫视','广东卫视','深圳卫视'
,'四川卫视','甘肃卫视','西藏卫视','新疆卫视','河南卫视','河北卫视','湖南卫视'
];
function choose(tv) {
var week = ['一','二','三','四','五','六','日'];//存放星期几的数组
var cloneLi = document.getElementsByTagName("li")[0];
var newLi = null;
var ul = $("ul");
for(var i=0;i<tv.length;i++) {
newLi = $(cloneLi).clone(true);
$(newLi).show();
$(newLi).children(".week").text("星期"+week[i%7]);
$(newLi).children("a").text(tv[i]);
$(newLi).children(".program").text("节目"+parseInt(i+1));
ul.append(newLi);
if(i === 1) {
$(newLi).addClass("liFocus");
}
}
}
choose(tv);
$(document).live("keydown",function(e) {
var liFocus = $(".liFocus");
//var e = event || window.event;
if(e.keyCode === 38) {
if($("li:first").next("li").hasClass("liFocus")) {
$("li").removeClass("liFocus");
$("li:last").addClass("liFocus");
}else {
$("li").removeClass("liFocus");
liFocus.prev("li").addClass("liFocus");
}
}else if(e.keyCode === 40) {
if($("li:last").hasClass("liFocus")) {
$("li").removeClass("liFocus");
$("li:first").next("li").addClass("liFocus");
}else {
$("li").removeClass("liFocus");
liFocus.next("li").addClass("liFocus");
}
}

});
</script>
</body>
</html>撸猪是这个意思不？？代码有待改进，这个不用我来做了吧
<div class="box">
<div class="listBox">
<div class="date">
<div class="lineLeft"></div>
<div class="lineRight"></div>
<ul>
<li class="wed"><a href="javascript:void(0);">星期三</a></li>
<li class="thur"><a href="javascript:void(0);"></a></li>
<li class="fri"><a href="javascript:void(0);"></a></li>
<li class="sat"><a href="javascript:void(0);"></a></li>
<li class="sun"><a href="javascript:void(0);"></a></li>
<li class="mon"><a href="javascript:void(0);"></a></li>
<li class="tues"><a href="javascript:void(0);"></a></li>
</ul>
</div>
<div class="channel">
<ul>
<li><em class="ico leftIco"></em><a href="javascript:void(0);">022.中央1台</a><em class="ico rightIco"></em></li>
<li class="selected"><em class="ico leftIco"></em><a href="javascript:void(0);" class="">023.中央2台</a><em class="ico rightIco"></em></li>
<li><em class="ico leftIco"></em><a href="javascript:void(0);" class="">024.中央3台</a><em class="ico rightIco"></em></li>
<li><em class="ico leftIco"></em><a href="javascript:void(0);" class="">025.中央4台</a><em class="ico rightIco"></em></li>
<li><em class="ico leftIco"></em><a href="javascript:void(0);" class="">026.中央5台</a><em class="ico rightIco"></em></li>
<li><em class="ico leftIco"></em><a href="javascript:void(0);" class="">026.中央6台</a><em class="ico rightIco"></em></li>
<li><em class="ico leftIco"></em><a href="javascript:void(0);" class="">026.中央7台</a><em class="ico rightIco"></em></li>

</ul>
</div>
<div class="program">
<ul>
<li><em class="ico leftIco"></em><a href="javascript:void(0);" class="">10:20--11:20    少儿歌声</a></li>
<li><em class="ico leftIco"></em><a href="javascript:void(0);" class="">11:20--12:30    来不及说我爱你</a></li>
<li class="selected"><em class="ico leftIco"></em><a href="javascript:void(0);" class="">15:30--17:30    电影时光</a></li>
<li><em class="ico leftIco"></em><a href="javascript:void(0);" class="">17:30--18:00    新闻快递</a></li>
<li><em class="ico leftIco"></em><a href="javascript:void(0);" class="">15:30--17:30    电影时光</a></li>
<li><em class="ico leftIco"></em><a href="javascript:void(0);" class="">17:30--18:00    新闻快递</a></li>
<li><em class="ico leftIco"></em><a href="javascript:void(0);" class="">15:30--17:30    电影时光</a></li>
</ul>
</div>
</div>
</div>结构如上；附上设计图
请看效果图：http://b.cssjidi.com/wp-content/uploads/2012/08/the_whole_EPG_C_on-1024x576.jpg
这是我写的一个插件，只是实现了上下切换，不过向上切换有点问题。请大家指教。// 创建一个闭包
(function($) {
// 插件的定义
$.fn.menu = function(params){
  //默认参数设置
  var params = $.extend({
subText:[
['中央一台','翡翠台','本港台','广州台','公共台','中央2台'],
['一','二','三','四','五'],
],
selected:'selected'
  },params);
  //处理全局
  var hIndex = 0,vIndex = 0, sIndex = 6;node = $(this);
  $(node).each(function(index) {
  //默认载入电视节目
  showChl(0,0);
  });
  //显示频道
function showChl(direction,index,setNum){
var len = node.children().size(),
html = '',
css = params.selected;
if(index < len){
console.log('--index='+ index + ';len=' + len)
for(var i = 0;i < len; i++){
if(i == setNum){
   html += '<li class="'+ params.selected +'"><em class="ico leftIco"></em><a href="javascript:void(0)"><marquee behavior="alternate" scrolldelay="100" scrollamount="2">'+ params.subText[hIndex][i] +'</marquee></a><em class="ico rightIco"></em></li>';
}else{
   html += '<li><em class="ico leftIco"></em><a href="javascript:void(0)">'+ params.subText[hIndex][i] +'</a><em class="ico rightIco"></em></li>';
}
}
node.html('');
node.append(html);
//选中状态
$(node).children().eq(index).addClass(css).siblings().removeClass(css);
}if(index >= len){
if(direction){
console.log('index='+ index + ';len=' + len)
setNum = len - 1;
for(var i = 0;i < len; i++){
if(i == setNum){
   html += '<li class="'+ params.selected +'"><em class="ico leftIco"></em><a href="javascript:void(0)"><marquee behavior="alternate" scrolldelay="100" scrollamount="2">'+ params.subText[hIndex][i + (index - len) + 1] +'</marquee></a><em class="ico rightIco"></em></li>';
}else{
   html += '<li><em class="ico leftIco"></em><a href="javascript:void(0)">'+ params.subText[hIndex][i + (index - len) + 1] +'</a><em class="ico rightIco"></em></li>';
}
}
node.html('');
node.append(html);
//选中状态
$(node).children().eq(len - 1).addClass(css).siblings().removeClass(css);
}else{
setNum = sIndex;
console.log('index='+ index + ';sIndex=' + setNum);
//if(node.children().first().hasClass(params.selected)){
for(var i = 0;i < len; i++){
if(i == setNum){
   html += '<li class="'+ params.selected +'"><em class="ico leftIco"></em><a href="javascript:void(0)"><marquee behavior="alternate" scrolldelay="100" scrollamount="2">'+ params.subText[hIndex][i + (index - len) + 1] +'</marquee></a><em class="ico rightIco"></em></li>';
}else{
   html += '<li><em class="ico leftIco"></em><a href="javascript:void(0)">'+ params.subText[hIndex][i + (index - len) + 1] +'</a><em class="ico rightIco"></em></li>';
}
}
node.html('');
node.append(html);
//}
//选中状态
$(node).children().eq(setNum).addClass(css).siblings().removeClass(css);
}
}
}
  //键值处理
  function checkKey(event){
switch (event.keyCode) {
case 37://向左
return false;
case 39://向右
return false;
case 38://向上
if(vIndex > 0){
vIndex --;
sIndex--;
}else{
vIndex = params.subText[hIndex].length - 1;
}
//createSub(false,vIndex,0)
showChl(false,vIndex,vIndex);
return false;
case 40://向下
if(vIndex < params.subText[hIndex].length - 1){
vIndex ++;
}else{
vIndex = 0;
}
showChl(true,vIndex,vIndex);
return false;
case 13://确认
return false;
};
   }
   //键盘事件响应
   $(document).keyup(checkKey);
};
})(jQuery);   /*调用*/
$('.channel ul').menu({
subText:[
['1 中央一台','2 中央二台','3 中央3台','4 中央4台','5 中央5台','6 中央6台','7 中央7台','8 中央8台','9 中央9台',
  '10 中央10台','11 翡翠台','12 本港台','13 广州台','14 公共频道','15 珠江频道','16 广东卫视','17 深圳卫视','18 广州竞赛',
  '19 广州影视','20 湖南卫视','21 浙江卫视','22 北京卫视','23 四川卫视','24 海南卫视','25 上海卫视','26 江苏卫视','27 广西卫视'
],
['一','二','三','四','五'],
],
selected:'selected'
})
根据你的代码大概模拟了1,2级鼠标移动
<style type="text/css">
ul{ list-style:none;}
.listBox{zoom:1;overflow:hidden;}
.date,.channel,.program{float:left;width:45px;}
.channel{width:270px}
.program{width:500px}
.selected{background:#f00}
.eee{background:#eee;}
</style>
<div class="box">
<div class="listBox">
<div class="date">
<div class="lineLeft"></div>
<div class="lineRight"></div>
<ul>
<li class="wed"><a href="javascript:void(0);">星期三</a></li>
<li class="thur"><a href="javascript:void(0);"></a></li>
<li class="fri"><a href="javascript:void(0);"></a></li>
<li class="sat"><a href="javascript:void(0);"></a></li>
<li class="sun"><a href="javascript:void(0);"></a></li>
<li class="mon"><a href="javascript:void(0);"></a></li>
<li class="tues"><a href="javascript:void(0);"></a></li>
</ul>
</div>
<div class="channel">
<ul></ul>
</div>
<div class="program">
<ul></ul>
</div>
</div>
</div>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
    // 创建一个闭包
    (function ($) {
        // 插件的定义
        $.fn.menu = function (params) {
            //默认参数设置
            var params = $.extend({
                subText: [
             ['中央一台', '翡翠台', '本港台', '广州台', '公共台', '中央2台'],
             [['一'], ['二'], ['三'], ['四'], ['五'], ['六']],////////不知道你1,2,3,4,5干嘛的，我这里改成了对应的频道对应的节目时间表了
            ],
                selected: 'selected'
            }, params);
            //处理全局
            var subTextIndex = 0
            , nowIndex = [0,0]
            , maxNum = 7;
            node = $(this);
showChl(node,0);//初始化
showChl(params.second,0,0);
            //显示频道
            function showChl(node,nowIndex,firstIndex) {
var isSecond=firstIndex!=undefined, min=nowIndex<maxNum?0:nowIndex,max=min+maxNum,html='',arr=params.subText[isSecond?1:0];
if(isSecond)arr=arr[firstIndex];
if(max>=arr.length){
  max=arr.length;
  min=Math.max(0,max-maxNum);
}
                for (; min < max; min++) {
                   if (min == nowIndex)
                      html += '<li class="' + params.selected + '"><em class="ico leftIco"></em><a href="javascript:void(0)"><marquee behavior="alternate" scrolldelay="100" scrollamount="2">' + arr[min]  + '</marquee></a>'+(isSecond?'':'<em class="ico rightIco"></em>')+'</li>';
                  else
                      html += '<li><em class="ico leftIco"></em><a href="javascript:void(0)">' + arr[min] + '</a>'+(isSecond?'':'<em class="ico rightIco"></em>')+'</li>';
                }
                node.children().remove();
node.html(html);
}
            //键值处理
            function checkKey(event) {
                switch (event.keyCode) {
                    case 37: //向左
    if(subTextIndex==1){
  node.children('li').eq(nowIndex[0]).removeClass('eee');
  subTextIndex=0;
}
                        return;
                    case 39: //向右
    if(subTextIndex==0){
       node.children('li').eq(nowIndex[0]).addClass('eee');
   subTextIndex=1;
   nowIndex[subTextIndex]=0;
}
return;
                    case 38: //向上
                        if (nowIndex[subTextIndex] > 0) nowIndex[subTextIndex]--;
else nowIndex[subTextIndex]=subTextIndex==0?params.subText[subTextIndex].length - 1:params.subText[subTextIndex][nowIndex[0]].length - 1;

                        break;
                    case 40: //向下
    if (nowIndex[subTextIndex] <(subTextIndex==0?params.subText[subTextIndex].length - 1:params.subText[subTextIndex][nowIndex[0]].length - 1)) nowIndex[subTextIndex]++;
else nowIndex[subTextIndex]=0;

                        break;
                    case 13: //确认
                        break;
                }
if(subTextIndex==0)showChl(node,nowIndex[subTextIndex]);
showChl(params.second,subTextIndex==0?0:nowIndex[subTextIndex],nowIndex[0]);
            }
            //键盘事件响应
            $(document).keyup(checkKey);
        };
    })(jQuery);    /*调用*/
    $('.channel ul').menu({
        subText: [
         ['1 中央一台', '2 中央二台', '3 中央3台', '4 中央4台', '5 中央5台', '6 中央6台', '7 中央7台', '8 中央8台', '9 中央9台'],
         [
         ['1 中央一台 -1', '1 中央一台 -2', '1 中央一台 -3', '1 中央一台 -4', '1 中央一台 -5', '1 中央一台 -6', '1 中央一台 -7', '1 中央一台 -8', '1 中央一台 -9']
         , ['2 中央二台 -1', '2 中央二台 -2', '2 中央二台 -3']
        , ['3 中央3台 -1', '3 中央3台 -2', '3 中央3台 -3']
        , ['4 中央4台 -1', '4 中央4台 -2', '4 中央4台 -3']
        , ['5 中央5台 -1', '5 中央5台 -2', '5 中央5台 -3']
        , ['6 中央6台 -1', '6 中央6台 -2', '6 中央6台 -3']
        , ['7 中央7台 -1', '7 中央7台 -2', '7 中央7台 -3']
        , ['8 中央8台 -1', '8 中央8台 -2', '8 中央8台 -3']
        , ['9 中央9台 -1', '9 中央9台 -2', '8 中央9台 -3']]
        ],
        selected: 'selected',second:$('.program ul')
    })
</script>
俺做出来了！谢谢各位！不过我没有用以上的代码，我只是按照我的思路去考虑。
首先将频道进行分组，用tIndex记录组号，用vIndex记录选中的台号。