关于定时器的问题

    var i = 1;
       var timer = setInterval(function() {
       i++; //3 4 5 6
       console.log(i);
           }, 1000);

当i=1的时候 console.log（i）----3 4 5 6 7....

当I=0的时候浏览器直接卡死是为什么？我还是不太了解这个定时器有没有明白的

========================================================================

<!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" />
<title>无标题文档</title>
<style>
ul { margin:0; padding:0;}
li { list-style:none;}
#wrap { width:300px; height:200px; padding:20px;}
ul { width:300px; height:30px;}
ul li { width:70px; height:30px; line-height:30px; text-align:center; background:#69F; float:left; cursor:pointer;}
img { width:230px; height:170px; float:left;}
a { display:inline-block; width:70px; height:40px; line-height:40px; color:#000; text-align:center; background:#CCC; text-decoration:none;}
.active1 { background:#FF3;}
.active2 { background:#069;}
</style>
</head>

<body>
<div id="wrap">
   <ul>
       <li>菜单一</li>
        <li>菜单二</li>
    </ul>
    <img src="" />
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</div>
<script>
   var oUl=document.getElementsByTagName("ul")[0];
   var oLi=document.getElementsByTagName("li");
   var oImg=document.getElementsByTagName("img")[0];
   var aHref=document.getElementsByTagName("a");
   var arrText1=["图片一","图片二","图片三"];
   var arrText2=["图片四","图片五","图片六"];
   var arrUrl1=["img/1.jpg","img/2.jpg","img/3.jpg"];
   var arrUrl2=["img/1.png","img/2.png","img/3.png"];
   var num=0;
   var timer=null;
   //初始化
   oImg.src=arrUrl1[num];
   oLi[num].className="active1";
   aHref[num].className="active2";
   for (var i=0; i<aHref.length; i++) {
       aHref[i].innerHTML=arrText1[i%arrText1.length];
       }

   //菜单一
   for (var i=0; i<oLi.length; i++) {
   oLi[0].onclick=function () {
       for (var i=0; i<oLi.length;i++) {
           oLi[i].className="";
           }
       this.className="active1"
       oImg.src=arrUrl1[num];
       for (var i=0; i<aHref.length; i++) {
           aHref[i].innerHTML=arrText1[i%arrText1.length];
           aHref[i].className="";
           aHref[0].className="active2";
           }
       getMouse(arrUrl1);
           };

       //aHref 公用样式

    function getMouse(arrUrl) {
       for (var i=0; i<aHref.length; i++) {
           aHref[i].index=i;

//点击

           aHref[i].onclick=function () {
               for (var i=0; i<aHref.length; i++) {
                   aHref[i].className="";
                   }
               this.className="active2";
               oImg.src=arrUrl[this.index%arrUrl.length];
               }

           //aHref 移入
           aHref[i].onmouseover=function () {
               for (var i=0; i<aHref.length; i++) {
                   aHref[i].className="";
                   }
               this.className="active2";
               oImg.src=arrUrl[this.index%arrUrl.length];
               }
       }
   }
   getMouse(arrUrl1);

   //菜单二
   oLi[1].onclick=function () {
       for (var i=0; i<oLi.length;i++) {
           oLi[i].className="";
           }
       this.className="active1"
       for (var i=0; i<aHref.length; i++) {
           aHref[i].innerHTML=arrText2[i%arrText2.length];
           oImg.src=arrUrl2[num];
           aHref[i].className="";
           aHref[0].className="active2";
           }
       getMouse(arrUrl2);
       }