<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="gb2312" /> <meta name="author" content="RainoXu" /> <title>flash幻燈</title> </head> <body> <style type ="text/css"> /* <![CDATA[ */ ul,li{ padding:0; margin:0; list-style:none; } #flashBox{ width:346px; height:186px; border:1px solid #EEE; position:relative; } #flashBox img{ /*初始不要顯示*/ display:none; /*用邊框來實現空位,因為margin和paading有時會引起些麻煩*/ border:3px solid #FFF; } #flashBox ul{ position:absolute; right:7px; bottom:9px; font:9px tahoma; } #flashBox ul li{ display:block; float:left; width:12px; height:12px; line-height:12px; margin-right:3px; border:1px solid #999; background:#F0F0F0; text-align:center; cursor:pointer; } #flashBox ul li.hover{ border-color:red; background:#FFE1E1; color:red; } /* ]]> */ </style> <script type="text/javascript"> function flashBoxCtrl(o){ this.obj=document.getElementById(o); //這個私有方法雖然寫了,但暫時沒用到 function addListener(ele,eventName,functionBody){ if (ele.attachEvent){ ele.attachEvent("on" eventName, functionBody); }else if (ele.addEventListener){ ele.addEventListener("on" eventName,functionBody, false); }else{ return false; } } //初始化 this.init=function(){ var objImg=this.obj.getElementsByTagName("img"); var tagLength=objImg.length; if (tagLength>0){ var oUl=document.createElement("ul"); oUl.setAttribute("id",o "numTag"); for (var i=0;i<tagLength;i ){ var oLi=oUl.appendChild(document.createElement("li")); if (i==0){ oLi.setAttribute("class","hover"); //初始化時把第一個設置為高亮 oLi.setAttribute("className","hover"); } //設置標籤的數字 oLi.appendChild(document.createTextNode((i 1))); } this.obj.appendChild(oUl); objImg[0].style.display="block"; //設置標籤事件 var oTag=this.obj.getElementsByTagName("li"); for (var i=0;i<oTag.length;i ){ oTag[i].onmouseover=function(){ for (j=0;j<oTag.length;j ){ oTag[j].className=""; objImg[j].style.display="none"; } this.className="hover"; objImg[this.innerHTML-1].style.display="block"; } } } }; //自動滾動的方法還沒寫 this.imgRoll=function(){}; //生成對象時自動載入init()方法以初始化對象 this.init(); } </script> <div id="flashBox"> <img src="" > <img src="" > <img src="" > <img src="" > </div> <script type="text/javascript"> //生成一個對象 new flashBoxCtrl("flashBox"); </script> </body> </html> |
[火星人 ] JS實現模擬FLASH幻燈片圖片切換網頁特效已經有639次圍觀