javaScript轮播和IE不兼容问题

我是按照一个教程照抄的代码，抄完之后发现在火狐上轮播器正常，但是在IE和IE内核的浏览器上没有效果，哪位朋友有时间的可以帮忙看一下问题出在哪里，非常感谢，下面我把代码帖一下！index.html文件代码：    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="my.css" rel="stylesheet" type="text/css" />
    <script src="my.js" type="text/javascript"></script>
    <title>无标题文档</title>
    </head>
    <div class="DIV2">
    <div class="DIV1" style="top:0px">
    <img src="images/01.jpg" alt="1" />
    <img src="images/02.jpg" alt="2" />
    <img src="images/03.jpg" alt="3" />
    <img src="images/04.jpg" alt="4" />
    </div>
    <ul class="buttons">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    </div>
    <body>
    </body>
    </html>
my.css文件代码：    @charset "utf-8";
    .DIV1 {          
        width:408px;
        height:672px;
        position:absolute; 
        top:0px;
        left:0px;
    }
    .DIV2 {          
        width:408px;  
        height:168px; 
        overflow:hidden;
        position:relative;
    }
    .DIV2 .buttons {
        height:24px;
        position:absolute; 
        right:10px;       
        top:117px;       
        z-index:9;
    }
    .DIV2 .buttons li {
        display:block;
        width:20px;
        height:20px;
        border:1px solid orange;
        margin-right:4px;   
        text-align:center;
        line-height:20px;
        cursor:pointer;       
        color:orange;           
        background-color:#FFF;
        font-weight:bold;       
         float:left;
    }
    .DIV2 .buttons li.hover {
        width:24px;          
        height:24px;
        line-height:24px;
        color:#FFF;
        background-color:orange;
        margin-top:-2px;
    }
my.js文件代码：    window.onload=function () {
        var ul=getByClass('buttons')[0];   
        var btns=ul.getElementsByTagName('li');
        var DIV1=getByClass('DIV1')[0];
        var cur=btns[0],t;                  
        for (var i=0;i<btns.length;i++){   
          (function (i) {                 
          btns[i].onmouseover=function () { 
            clearTimeout(t);
          //DIV1.style.top=(-i*168)+"px"; 
            var top=parseInt(DIV1.style.top);
            animate(DIV1,{top:top},{top:(-i*168)-top},500,Quad);
            for (var j=0;j<btns.length;j++){  
                btns[j].className="";
            }
            this.className="hover";
            cur=this;            
           
          };
          btns[i].onmouseout=function () { 
            t=setTimeout(fn,1000)
          };
          btns[i].index=i;       
          })(i);
        }
        btns[0].onmouseover();
        t=setTimeout(fn,1000);      
        function fn () {
            var nextindex=cur.index+1;
            if (nextindex == btns.length) {  
              nextindex=0;               
            }
            btns[nextindex].onmouseover();
            t=setTimeout(fn,1000);     
        }
    };
    function getByClass(className,context) {
          context=context || document;
          if (context.getElementsByClassName) {
            return context.getElementsByClassName(className);
          }
          var nodes=context.getElementsByTagName('*'),
              ret=[];
          for (var i=0;i<nodes.length;i++) {
            if (hasClass(nodes[i],className)) ret.push(nodes[i]);
          }
          return ret;
        }
    function hasClass(node,className) {
          var names=node.className.split(/\s+/);
          for (var i=0;i<names;i++) {
            if (names[i]==className) return true;
          }
          return false;
    }
    function animate(o,start,alter,dur,fx) {
        var curTime=0;
        var t=setInterval(function () {
            if (curTime>=dur) clearTimeout(t);
            for (var i in start) {
                o.style[i]=fx(start[i],alter[i],curTime,dur)+"px";
            }
            curTime+=50;
           
        },50);
    }
    function Linear(start,alter,curTime,dur) {
        return start+curTime/dur*alter;
    }//最简单的线性变化,即匀速运动
    function Quad(start,alter,curTime,dur) {
        return start+Math.pow(curTime/dur,2)*alter;
    }

解决方案 »

  1.   


     火狐里面有  getElementsByClassName 这个函数ie 里面没有 getElementsByClassName所以 在ie 里面 getByClass  这个函数 没有走第一个判断 而走的是第后面的for循环在循环里面又调用了 hasClass 这个函数  这个函数 好像写的有点问题 lz 再测试下...  
      

  2.   


     function hasClass(node,className) {
              var names=node.className.split(/\s+/);
              for (var i=0;i<names;i++) {
                if (names[i]==className) return true;
              }
              return false;
        }
    楼主粗心了。。
    for (var i=0;i<names;i++) {
                if (names[i]==className) return true;
    }
    少了个length,应该是for (var i=0;i<names.length;i++) {
                if (names[i]==className) return true;
    }
      

  3.   

    把hasClass函数里面的name加上它的长度后，火狐仍然正常，IE等其它的还是不行，唉！我宁愿它只在IE下面正常，怎么说现在国内用火狐的人应该也不是很多我刚才找了那教程里面附带的源码，发现也是只在火狐下面正常，照道理应该没有抄错代码才对!~希望有朋友可以给个解决办法，谢谢
      

  4.   

    怎么我在IE加了length后没问题？
      

  5.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE>demo</TITLE>
      <META http-equiv="content-type" content="text/html;charset=gbk"/>
      <META NAME="Generator" CONTENT="CSS">
      <META NAME="Author" CONTENT="zhangqian">
      <META NAME="Keywords" CONTENT="mydemo">
      <META NAME="Description" CONTENT="this is my demo">
      <LINK rel="stylesheet" type="text/css" href=""></LINK>
      <style type="text/css">
     .DIV1 {          
            width:408px;
            height:672px;
            position:absolute; 
            top:0px;
            left:0px;
        }
        .DIV2 {          
            width:408px;  
            height:168px; 
            overflow:hidden;
            position:relative;
        }
        .DIV2 .buttons {
            height:24px;
            position:absolute; 
            right:10px;       
            top:117px;       
            z-index:9;
        }
        .DIV2 .buttons li {
            display:block;
            width:20px;
            height:20px;
            border:1px solid orange;
            margin-right:4px;   
            text-align:center;
            line-height:20px;
            cursor:pointer;       
            color:orange;           
            background-color:#FFF;
            font-weight:bold;       
             float:left;
        }
        .DIV2 .buttons li.hover {
            width:24px;          
            height:24px;
            line-height:24px;
            color:#FFF;
            background-color:orange;
            margin-top:-2px;
        }
      </style>

      <script type="text/javascript" src=""></script>  </HEAD>
      <BODY>

     <div class="DIV2">
        <div class="DIV1" style="top:0px">
        <img src="images/01.jpg" alt="1" />
        <img src="images/02.jpg" alt="2" />
        <img src="images/03.jpg" alt="3" />
        <img src="images/04.jpg" alt="4" />
        </div>
        <ul class="buttons">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        </ul>
        </div>
    <script type="text/javascript">
        window.onload=function () {
            var ul=getByClass('buttons')[0];   
            var btns=ul.getElementsByTagName('li');
            var DIV1=getByClass('DIV1')[0];
            var cur=btns[0],t;                  
            for (var i=0;i<btns.length;i++){   
              (function (i) {                 
              btns[i].onmouseover=function () { 
                clearTimeout(t);
              //DIV1.style.top=(-i*168)+"px"; 
                var top=parseInt(DIV1.style.top);
                animate(DIV1,{top:top},{top:(-i*168)-top},500,Quad);
                for (var j=0;j<btns.length;j++){  
                    btns[j].className="";
                }
                this.className="hover";
                cur=this;            
               
              };
              btns[i].onmouseout=function () { 
                t=setTimeout(fn,1000)
              };
              btns[i].index=i;       
              })(i);
            }
            btns[0].onmouseover();
            t=setTimeout(fn,1000);      
            function fn () {
                var nextindex=cur.index+1;
                if (nextindex == btns.length) {  
                  nextindex=0;               
                }
                btns[nextindex].onmouseover();
                t=setTimeout(fn,1000);     
            }
        };
        function getByClass(className,context) {
              context=context || document;
              if (context.getElementsByClassName) {
                return context.getElementsByClassName(className);
              }
              var nodes=context.getElementsByTagName('*'),
                  ret=[];
              for (var i=0;i<nodes.length;i++) {
                if (hasClass(nodes[i],className)) ret.push(nodes[i]);
              }
              return ret;
            }
        function hasClass(node,className) {
              var names=node.className.split(/\s+/);
              for (var i=0;i<names.length;i++) {
                if (names[i]==className) return true;
              }
              return false;
        }
        function animate(o,start,alter,dur,fx) {
            var curTime=0;
            var t=setInterval(function () {
                if (curTime>=dur) clearTimeout(t);
                for (var i in start) {
                    o.style[i]=fx(start[i],alter[i],curTime,dur)+"px";
                }
                curTime+=50;
               
            },50);
        }
        function Linear(start,alter,curTime,dur) {
            return start+curTime/dur*alter;
        }//最简单的线性变化,即匀速运动
        function Quad(start,alter,curTime,dur) {
            return start+Math.pow(curTime/dur,2)*alter;
        }
    </script> </BODY>
    </HTML>通过我测试  ie 和 ff 都好使 ..      ie 和ff 下面的效果是一模一样  难道不是lz 想要的..  
      

  6.   


    我就说少了个length,,加上就可以了。。奇怪楼主加了后都不行
      

  7.   

    qianzai5765638   ，感谢你在百忙之中还抽出时间来帮忙写个DEMO，先拿你的代码来研究一下区别，谢谢你
      

  8.   

    楼主。。我服你了。他和你的区别就是length的区别。。难道不是我先告诉你的？郁闷
      

  9.   

    liangws，真是不好意思，不知道怎么回事，我按你给的方法加了个length 就是不行，刚才也对照qz发的代码，确实也只加了一个length   ，我就大概想到原因：我把代码从网站再
    复制下来，希望按你说的加个length，现在就可以了，我倒了，
    应该是抄代码时编辑器的问题，例如空格、tab什么的，无语了，我用的是Dreamweaver和Zend Studioliangws，现在补个帖给你分，报歉
      

  10.   

    为什么在html里好使，在jsp中include就不好使啊，求解！