图片切换加定时器（图片轮播）

Posted 2020-10-18 麦兜家园

之前写过一个图片切换的实例，当时只是没有加定时器，今天加上定时器，让其自动播放，好的来看代码：

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，所以这里一定要注意这个细节。

好了，今天就这样了，欢迎指出问题！