JS实现FLASH幻灯片图片切换效果的方法
本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-cn"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <metahttp-equiv="Content-Language"content="gb2312"/> <metaname="author"content="RainoXu"/> <title>JS模拟FLASH幻灯片图片切换效果</title> </head> <body> <style type="text/css"> /* <![CDATA[ */ ul,li{ padding:0; margin:0; list-style:none; } #flashBox{ width:326px; height:246px; border:1pxsolid#EEE; position:relative; } #flashBoximg{ /*初始不要显示*/ display:none; /*用边框来实现空位,因为margin和paading有时会引起些麻烦*/ border:3pxsolid#FFF; } #flashBoxul{ position:absolute; right:7px; bottom:9px; font:9pxtahoma; } #flashBoxulli{ display:block; float:left; width:12px; height:12px; line-height:12px; margin-right:3px; border:1pxsolid#999; background:#F0F0F0; text-align:center; cursor:pointer; } #flashBoxulli.hover{ border-color:red; background:#FFE1E1; color:red; } /* ]]> */ </style> <scripttype="text/javascript"> functionflashBoxCtrl(o){ this.obj=document.getElementById(o); //这个私有方法虽然写了,但暂时没用到 functionaddListener(ele,eventName,functionBody){ if(ele.attachEvent){ ele.attachEvent("on"+eventName,functionBody); }elseif(ele.addEventListener){ ele.addEventListener("on"+eventName,functionBody,false); }else{ returnfalse; } } //初始化 this.init=function(){ varobjImg=this.obj.getElementsByTagName("img"); vartagLength=objImg.length; if(tagLength>0){ varoUl=document.createElement("ul"); oUl.setAttribute("id",o+"numTag"); for(vari=0;i<tagLength;i++){ varoLi=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"; //设置标签事件 varoTag=this.obj.getElementsByTagName("li"); for(vari=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> <divid="flashBox"> <imgsrc="/images/m02.jpg"/> <imgsrc="/images/m03.jpg"/> <imgsrc="/images/m04.jpg"/> <imgsrc="/images/m09.jpg"/> </div> <scripttype="text/javascript"> //生成一个对象 newflashBoxCtrl("flashBox"); </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。