图片轮播

来源：互联网发布：python制作dll 编辑：程序博客网时间：2024/06/16 17:54
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>    <style type="text/css">#d{position:relative;top:-30px;}label{margin-left:15px;}.one{width:10px;height:10px;border:1px solid black ;background-color: red ;}    </style> </head><script type="text/javascript"><!--var n = 0 ;var t = 0 ;var flag = true ;function init(){//拿到所有的label控件var lbls = document.getElementsByTagName("label") ;//给每个label控件注册事件for(var i= 0 ;i<lbls.length;i++){lbls[i].onmouseover = function(){//让时间停下来clearTimeout(t) ;//让图片显示为相应的图片var b = this.innerText * 1 ;//拿到img对象var img = document.getElementById("img") ;img.src = "images/photo_0" + b + ".jpg" ;//清空所有label控件的样式clearStyle() ;//让label的样式变成one的样式this.className = "one" ;}lbls[i].onmouseout =function(){//alert(flag) ;//隔1秒调用fun()t = setTimeout("fun()",1000) ;//改变当前n的值n = this.innerText*1 ;//将flag变量的值设为FALSE}}fun() ;}function fun(){n ++;if(n == 7)n =1 ;//拿到图片对象var img = document.getElementById("img") ;img.src = "images/photo_0" + n + ".jpg" ;clearStyle() ;//设定相应的label控件的样式document.getElementById("i" + n).className = "one" ;t = setTimeout("fun()",1000) ;}function clearStyle(){//清空所有label控件的样式//拿到所有的label控件var lbls = document.getElementsByTagName("label") ;for(var i = 0 ; i <lbls.length ;i++){lbls[i].className = "" ;}}//--></script> <body onload = "init()"> <div align = "center"><img src = "images/photo_01.jpg" width = "300" height = "300" id = "img"><div id = "d"><label id = "i1"> 1 </label><label id = "i2"> 2 </label><label id = "i3"> 3 </label><label id = "i4"> 4 </label><label id = "i5"> 5 </label><label id = "i6"> 6 </label></div> </div>  </body></html>
0 0