幻灯程序更新v2.0

goby2008 · 发表于 2013-2-8 00:53:47

<!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">//<![CDATA[function flashBoxCtrl(o,t){ /* =======参数释意========= @ o:需要控制的xhtml元素的ID @ t:图片切换的时间间隔 ===================== */ //self用于在不明确this指向时使用，因为self指向对象本身 var self=this; this.obj=document.getElementById(o); this.controller=null; this.speed=t; //这个私有方法虽然写了，但暂时没用到 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"); //for FF oLi.setAttribute("className","hover");//for IE } //设置标签的数字 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.onmouseover=function(){ for (j=0;j<oTag.length;j++){ oTag[j].className=""; objImg[j].style.display="none"; //鼠标移上时清除滚动 clearInterval(self.controller); } this.className="hover"; objImg[this.innerHTML-1].style.display="block"; } oTag.onmouseout=function(){ //鼠标移开则继续滚动 self.controller=setInterval(function(){self.imgRoll()},self.speed); } } } self.controller=setInterval(function(){self.imgRoll()},self.speed); }; //自动滚动的方法 this.imgRoll=function(){ var objHover; var objImg=this.obj.getElementsByTagName("img"); var objLi=this.obj.getElementsByTagName("li"); var i; for (i=0;i<objImg.length;i++){ if (objImg.style.display=="block"){ break; } } objImg.style.display="none"; objLi.className=""; if (i+1>=objImg.length){ i=0; }else{ i++; } objImg.style.display="block"; objLi.className="hover"; }; //生成对象时自动加载init()方法以初始化对象 this.init(); }//]]></script><div id="flashBox"> <img src="http://www.jx573.com/Files/NewsFiles2/200810/2008102917030398977.jpg" /> <img src="http://www.jx573.com/Files/NewsFiles2/200811/200811181021448159.jpg" /> <img src="http://www.jx573.com/Files/NewsFiles2/200810/2008103112433473300.jpg" /> <img src="http://www.jx573.com/Files/NewsFiles2/200811/2008110414250831677.jpg" /> </div><script type="text/javascript">//<![CDATA[//生成一个对象new flashBoxCtrl("flashBox",1000);//]]></script></body></html>

		自动登录	找回密码
密码			立即注册