图片切换 

           
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片自动切换</title>
    <style>
        ul{
              padding: 0px; /*内边距*/
              margin: 0px;/*外边距*/
          }
        li{
            list-style-type: none;/*设置列表的格式(前面的点等)*/
            border: 1px solid black;/*边框*/
            width: 30px;/*宽*/
            height: 30px;/*高*/
            text-align: center;/*把文本排列到中间*/
            line-height: 30px;/*设置行间的距离（行高）*/
            float:left;/*浮动向左*/
            margin-right: 10px;/*设置元素的右外边距*/
        }
    </style>
    <script type="text/javascript" >
        //设置var数组
        var imgArray =["../image/Chrysanthemum.jpg","../image/Desert.jpg","../image/Hydrangeas.jpg","../image/Lighthouse.jpg"];
        //window的onload事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中
        window.onload=function () {
            //触发定时器
            startTime();
        var liObjects =  document.getElementsByTagName("li");
            //for循环 数组i
            for(var i=0;i<liObjects.length;i++){
                var liObj=liObjects[i];
                //鼠标移到li上
                liObj.onmouseover=function () {
                    //parseInt是内置函数可解析一个字符串，并返回一个整数。
                    over(parseInt(this.innerText)-1);
                    //同时清除定时器对象
                    clearInterval(mytime);
                };
                liObj.onmouseout=function () {
                    this.className="";
                    startTime();
                };
                console.log(i);
            }
        };
          function  over(i) {
            document.getElementById("showImg").innerHTML="<img src='"+imgArray[i]+" 'width='300px' height='300px'/>" ;
          }
        var num=0;
        var mytime;
        function  startTime() {
            //每隔多少时间运行一次，setTimeout只执行一次
            mytime = setInterval(function () {
                over(num);
                num++;
                if (num > 3) {
                    num = 0;
                }
            }, 1);
        }
        </script>
</head>
<body >
<div id="showImg" style="width:300px;height:300px;border: 1px solid black;">

</div>
<br>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>

</ul>
</body>
</html>
 
posted @ 2016-11-24 09:46  撑死的肥猫  阅读(165)  评论(0)    收藏  举报