图片切换加定时器(图片轮播)

Posted 麦兜家园

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片切换加定时器(图片轮播)相关的知识,希望对你有一定的参考价值。

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

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

好了,今天就这样了,欢迎指出问题!

以上是关于图片切换加定时器(图片轮播)的主要内容,如果未能解决你的问题,请参考以下文章

50行代码图片轮播加定时广告

js轮播图(点击图片切换 定时器效果)

js图片轮播点击

js--1图片切换,定时器,自动轮播,图片显示隐藏

js--1图片切换,定时器,自动轮播,图片显示隐藏

图片轮播