JavaScript的定时器运用以及鼠标事件的运用

废话不多说，本篇文章主要是利用JavaScript的内置对象实现图片轮换的效果。

涉及知识为定时器 1. setInteval(),和clearInterval;

                               2.getElementById()和getElementsByTagName;

首先是HTML代码的核心部分：

    <div>
      <div id="box">
      <ul id ="test">
         <li><img src="./iamge/timg.jpg"></li>
         <li><img src="./iamge/timg (1).jpg"></li>
         <li><img src="./iamge/timg (2).jpg"></li>
         <li><img src="./iamge/timg (3).jpg"></li>
         <li><img src="./iamge/timg (4).jpg"></li>
       </ul>
      <div>
         <span id="left">&lt;</span>
         <span id="right">&gt;</span>
       </div>
       </div>
    </div>

然后是css代码：

      *{
    margin: 0px;
    padding: 0px;
}
#box{
    width: 790px;
    height: 370px;
    border: 1px solid;
    margin: auto;
    overflow:hidden; //溢出隐藏
}


ul{
    list-style: none;//消除无序列表点
}
img{
    width: 790px;
    height: 370px;
}
#left{
    position: absolute;
    top:120px;
    left:287px;
}
#right{
    position: absolute;
    top:120px;
    right:287px;
}
span{
    color:#fff;
    width:50px;
    height:100px;
    text-align: center;
    background: #ccc;
    opacity: 0.5;
    font-size: 50px;
    line-height: 100px;
}

然后是js代码：

var box = document.getElementById("box");
var ul1 = box.getElementsByTagName("ul");
var lis = box.getElementsByTagName("li");
var index = 0;
function tie() {


    for(var i=0;i<lis.length;i++){


        lis[i].style.display = "none";


    }


    index++;


    if(index>lis.length-1){
        index=0;
    }


    lis[index].style.display = "block";


}
var time = setInterval(tie,1000);
box.onmouseover = function(){


    clearInterval(time);
}
box.onmouseout = function(){


    time=setInterval(tie,1000);
}

说明：*：在css中是通配符，代表所有的HTML的doc元素标签。

主要：按以上代码运行，若js文件放在head中，可能出现错误1.cannot proprety ......of null.2.document.getElementById失效。

原因：1.修改了一个HTML标签的内容，需要HTML加载完成并解析完成之后才能找到对应的id标签。

             2.在HTML中是按顺序读取运行的，那么head中的js是无法获取后者的body中的元素的，导致docment.getElementById无法获取元素。

措施： 1.把js文件放在html的后面，但显得代码凌乱。

             2.在js中把最后执行的代码放在window.onload=function（）{}中。

然后是对定时器setInterval的理解，就是一个定时的循环。