JavaScript如何实现这样的效果

下图的效果如何实现呢，就是通过点击左右滚动按钮在不同模块间切换！！

解决方案 »

  1.   

    首先这是一个选项卡的的demo，其次切换的时候不是用鼠标而是用键盘，这样就可以了
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function show(unmber,unmber1,unmber2,unmber3,unmber4) {
    document.getElementById("adv" + unmber).bgColor = "#FFFFFF";
    document.getElementById("adv" + unmber1).bgColor = "#CCFFFF";
    document.getElementById("adv" + unmber2).bgColor = "#CCFFFF";
    document.getElementById("adv" + unmber3).bgColor = "#CCFFFF";
    document.getElementById("adv" + unmber4).bgColor = "#CCFFFF";
    }
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <table align="center"  cellpadding="12" cellspacing="12" style="cursor:hand">
    <tr bgColor="#CCFFFF">
    <td id="adv1" onClick="show('1','2','3','4','5')">新闻</td>
    <td id="adv2" onClick="show('2','1','3','4','5')">财经</td>
    <td id="adv3" onClick="show('3','2','1','4','5')">娱乐</td>
    <td id="adv4" onClick="show('4','2','3','1','5')">体育</td>
    <td id="adv5" onClick="show('5','2','3','4','1')">汽车</td>
    </tr>
    </table>
    </BODY>
    </HTML>
      

  3.   

    楼上的效果是点击那些文字是切换样式，LZ貌似是希望点击左右2边的箭头来实现这个效果
    建议在楼上的基础中，给每个td加上class，通过class来判断哪一个是被选中的，然后在调用那个show方法
      

  4.   

    把他看作分页吧。。就容易处理了，另外，Jquery 已经有这样的插件了，简单方便
      

  5.   

    方法比较累赘：    <script language="JavaScript" type="text/javascript">
    <!--
        function show2(obj)
        {
            var tb1=document.getElementById("TB1");
            var row=tb1.rows;
            var cell=row[0].cells;
            
            for(i=0;i<cell.length;i++)
            {
                if(cell[i].id!="")//让“<<”“>>”不变颜色
                {
                    cell[i].style.backgroundColor="#CCFFFF";
                    obj.style.backgroundColor="#FFFFFF";
                }
            }
        }
        
        function Move(obj,Commd)
        {
            var tb1=document.getElementById("TB1");
            var row=tb1.rows;
            var cell=row[0].cells;
            
            var arry=new Array();
            
            if(obj.id!=null)
            {
                for(i=0;i<cell.length;i++)
                {
                    if(cell[i].style.display=="")
                    {
                        arry.push(cell[i].id);
                    }
                }
                
                if(Commd=="left")//向左边移动
                {
                    var Num=parseInt(arry[1].split('d')[1])-1;
                    
                    if(Num> 0)
                    {
                        document.getElementById(""+arry[5]+"").style.display="none";//隐藏最右边的选项
                        
                        document.getElementById("Td"+Num+"").style.display="";//恢复最左边的选项
                    }
                 }
                }
                else if(Commd=="right")
                {
                    var Num=parseInt(arry[5].split('d')[1])+1;
                    
                    if(Num< parseInt(cell.length)-1)
                    {
                        document.getElementById(""+arry[1]+"").style.display="none";//隐藏最左边的选项
                        
                        document.getElementById("Td"+Num+"").style.display="";//恢复最右边的选项
                    }
                    }
                }
            }
        }    -->
        </script>
    <table align="center" cellpadding="12" cellspacing="12" style="cursor: hand" id="TB1">
            <tr bgcolor="#CCFFFF">
                <td onclick="Move(this,'left')" bgcolor="#ffcc66">
                    <<</td>
                <td id="Td1" onclick="show2(this)">
                    新闻</td>
                <td id="Td2" onclick="show2(this)">
                    财经</td>
                <td id="Td3" onclick="show2(this)">
                    娱乐</td>
                <td id="Td4" onclick="show2(this)">
                    体育</td>
                <td id="Td5" onclick="show2(this)">
                    汽车</td>
                <td id="Td6" onclick="show2(this)" style="display:none">
                    NBA</td>
                <td id="Td7" onclick="show2(this)" style="display:none">
                    CBA</td>
                <td id="Td8" onclick="show2(this)" style="display:none">
                    世界杯</td>
                <td onclick="Move(this,'right')" bgcolor="#ffcc66">
                    >></td>
            </tr>
        </table>