qq_31788907 2016-04-21 03:11 采纳率: 69.2%
浏览 1419
已采纳

Jquery语句换成JS写这段

图片说明求大神帮忙 第二句是别人打给我参考的

  • 写回答

2条回答

  • cocotsau 2016-04-21 14:08
    关注

    看下代码,真挺麻烦

     <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    li {float:left; height:50px; width:50px; background:#ccc; list-style:none; margin-left:5px;}
    li.curr {background:red;}
    </style>
    <script type='text/javascript'>
    function hasClass(obj, sCls){   
        return obj.className.match(new RegExp("\\b"+sCls+"\\b", "i"));      
    }
    function addClass(obj, sCls){   
        var blank=(obj.className!="")?" ":"";
        if(!hasClass(obj, sCls))obj.className+=blank+sCls;  
    }
    
    function removeClass(obj, sCls){    
        var re=new RegExp("(\\s|^)"+sCls+"(\\s|$)", "i");
        if(hasClass(obj, sCls))obj.className=obj.className.replace(re, ""); 
    }
    function prevAll(arr,sCls){
        var index=0;
        for(var i=0;i<arr.length;i++){
            if(hasClass(arr[i],sCls))index=i;
        }
        return index;
    }
    window.onload=function(){
        var aLi=document.getElementsByTagName('li'), index;
    
        var movePrev = function (){
            index=prevAll(aLi,'curr');
            if(index==0){//可循环移动
                removeClass(aLi[index],'curr');
                addClass(aLi[aLi.length-1],'curr');
                index = aLi.length-1;
                console.log(index);
            }else{
                removeClass(aLi[index],'curr');
                addClass(aLi[index-1],'curr');
                index--;
                console.log(index);
            }
        }       
        var moveNext = function (){
            index=prevAll(aLi,'curr');
            if(index==aLi.length-1){//可循环移动
                removeClass(aLi[aLi.length-1],'curr');
                addClass(aLi[0],'curr');
                index = 0;
            }else{
                removeClass(aLi[index],'curr');
                addClass(aLi[index+1],'curr');
                index++;
            }                           
        }
        document.onkeydown=function(e){
            var e = e || event,
            code = e.keyCode || e.which;
            code==38 && movePrev();
            code==40 && moveNext();             
        }
    
    };
    </script>
    </head>
    <body>
    <ul>
        <li class='curr'></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误