圖片切換加定時器（圖片輪播）

以前寫過一個圖片切換的實例，當時只是沒有加定時器，今天加上定時器，讓其自動播放，好的來看代碼：

css代碼：

<style>
    ul { padding:0; margin:0; }
    li { list-style:none; }
    .box { width:400px; height:500px; position:relative;
        float: left;margin-right:60px; background:url(img/loader_ico.gif) no-repeat center #fff; }
    .box img { width:400px; height:500px; }
    .box ul { width:40px; position:absolute; top:0; right:-50px; }
    .box li { width:40px; height:40px; margin-bottom:4px; background:#666; }
    .box .active { background:#FC3; }
    .box span { top:0; }
    .box p { bottom:0; margin:0; }
    .box p,.box span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>

html代碼：

 <div class="box" id="pic1">
        <img src="" />
        <span>數量正在加載中……</span>
        <p>文字說明正在加載中……</p>
        <ul></ul>
  </div>

接下來就是js代碼：

window.onload = function() {
            var oDiv = document.getElementById("pic1");
            var oImg = oDiv.getElementsByTagName("img")[0];
            var oUl = oDiv.getElementsByTagName("ul")[0];
            var aLi = oUl.getElementsByTagName("li");
            var oSpan = oDiv.getElementsByTagName("span")[0];
            var oPtxt = oDiv.getElementsByTagName("p")[0];
            var arrUrl = ["img/pic1.jpg", "img/pic2.jpg", "img/pic3.jpg", "img/pic4.jpg"];
            var arrPtxt = ["圖1", "圖2", "圖3", "圖4"];
            var num = 0;
            //在ul裏追加li，li的數量等於數組的長度
            for (var i = 0; i < arrUrl.length; i++) {
                oUl.innerHTML += "<li></li>";
            }

            //加定時器 var timer=null; function autoplay(){ timer = setInterval(function(){ num++; num%=arrUrl.length; fn(); },1000); }autoplay(); oDiv.onmouseover=function(){ clearInterval(timer); }; oDiv.onmouseout= autoplay;//注意：事件調用不能加括號，函數名稱加括號就等於函數返回的值，若你函數沒有返回值那麼就是undefined

        //初始化
            function fn() {
                oImg.src = arrUrl[num];
                oPtxt.innerHTML = arrPtxt[num];
                oSpan.innerHTML = 1 + num + "/" + arrUrl.length;
                for (var i = 0; i < aLi.length; i++) {
                    aLi[i].className = "";
                }
                aLi[num].className = "active"
            }
            fn();

            for (var i = 0; i < aLi.length; i++) {//循環li
                aLi[i].index = i;//索引值，當前li等於i
                aLi[i].onclick = function () {
                    num = this.index;
                    fn();
                }

            }

    }

注意：加定時器這一部分代碼標粗了，爲了看的更加清楚，特別要注意的小細節就是我註釋裏的內容：事件調用不能加括號，函數名稱加括號就等於函數返回的值，若你函數沒有返回值那麼就是undefined，因此這裏必定要注意這個細節。

好了，今天就這樣了，歡迎指出問題！