图片切换加定时器(图片轮播)
之前写过一个图片切换的实例,当时只是没有加定时器,今天加上定时器,让其自动播放,好的来看代码:
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,所以这里一定要注意这个细节。
好了,今天就这样了,欢迎指出问题!