学步园

我做了如下改动：
1.增加自动功能
2.鼠标悬停于图片框架时，停止自动滚屏。当然离开时继续自动滚屏
3.原来一屏4张图片现改为5张图片，以适应我的页面。
4.修改了部分CSS的width/height

CSS文件有很多地方是多余的，你可以自行修改，删除。
本文档来自网上。现在沙发上贴出修改后的JS代码，供各位研究。
需整个完整代码的同学请去下面地址下载。
http://download.csdn.net/source/2658083
下面是演示地址http://www.playtigers.com/article/5b/2378.html

var TencntART=new Object();<br /> TencntART.Browser={ie:/msie/.test(window.navigator.userAgent.toLowerCase()),<br /> moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),<br /> opera:/opera/.test(window.navigator.userAgent.toLowerCase()),<br /> safari:/safari/.test(window.navigator.userAgent.toLowerCase())};</p> <p>TencntART.JsLoader={<br /> load:function(sUrl,fCallback)<br /> {<br /> var _script=document.createElement('script');<br /> _script.setAttribute('charset','gb2312');<br /> _script.setAttribute('type','text/javascript');<br /> _script.setAttribute('src',sUrl);<br /> document.getElementsByTagName('head')[0].appendChild(_script);<br /> if(TencntART.Browser.ie)<br /> {<br /> _script.onreadystatechange=function()<br /> {<br /> if(this.readyState=='loaded'||this.readyStaate=='complete')<br /> {fCallback();}<br /> };<br /> }<br /> else if(TencntART.Browser.moz)<br /> {<br /> _script.onload=function(){<br /> fCallback();<br /> };<br /> }<br /> else<br /> {<br /> fCallback();<br /> }<br /> }<br /> };<br /> var TencentArticl=new Object();<br /> TencentArticl={<br /> $:function(v)<br /> {<br /> return document.getElementById(v)<br /> },<br /> getEles:function(id,ele)<br /> {return this.$(id).getElementsByTagName(ele);},<br /> tabId:"sildPicBar",<br /> tabDot:"dot",<br /> tabBox:"cnt-wrap",<br /> tabOuterDiv:"outerDiv",<br /> tabSilder:"cnt",<br /> tabSilderSon:"li",<br /> comtList:"ComList",<br /> rightBorder:"silidBarBorder",<br /> Count:function()<br /> {return this.getEles(this.tabSilder,this.tabSilderSon).length},<br /> Now:0,<br /> isCmt:true,<br /> isSild:true,<br /> timer:null,<br /> site:'news',<br /> mytimer:null,<br /> cmtId:'21572303',<br /> cmtBase:'comment5',<br /> sideTab:{heads:'tabTit',heads_ele:'span',bodys:'tabBody',bodys_ele:'ol'},<br /> SildTab:function(now){<br /> this.Now=Number(now);<br /> if(this.Now>Math.ceil(this.Count()/5)-1)<br /> {this.Now=0;}<br /> else if(this.Now<0)<br /> {this.Now=Math.ceil(this.Count()/5)-1;}<br /> if(parseInt(this.$(this.tabSilder).style.left)>-125*parseInt(this.Now*5))<br /> {this.moveR();}<br /> else{this.moveL();}<br /> for(var i=0;i<Math.ceil(this.Count()/5);i++)<br /> {<br /> if(i==this.Now)<br /> {<br /> this.getEles(this.tabId,"li")[this.Now].className="select";<br /> }<br /> else<br /> {<br /> this.getEles(this.tabId,"li")[i].className="";<br /> }<br /> }<br /> },<br /> moveR:function(setp)<br /> {<br /> var _curLeft=parseInt(this.$(this.tabSilder).style.left);<br /> var _distance=50;<br /> if(_curLeft>-124*parseInt(this.Now*5))<br /> {<br /> this.$(this.tabSilder).style.left=(_curLeft-_distance)+26+"px";<br /> window.setTimeout("TencentArticl.moveR()",1);<br /> }<br /> },<br /> moveL:function(setp)<br /> {<br /> var _curLeft=parseInt(this.$(this.tabSilder).style.left);<br /> var _distance=50;<br /> if(_curLeft<-125*parseInt(this.Now*5))<br /> {<br /> this.$(this.tabSilder).style.left=(_curLeft+_distance)-26+"px";<br /> window.setTimeout("TencentArticl.moveL()",1);<br /> }<br /> },<br /> pagePe:function(way)<br /> {<br /> if(way=="next")<br /> {this.Now+=1;this.SildTab(this.Now);}<br /> else<br /> {this.Now-=1;this.SildTab(this.Now);}<br /> },<br /> smallCk:function()<br /> {<br /> for(var i=0;i<Math.ceil(this.Count()/5);i++)<br /> {<br /> if(i==0)<br /> {<br /> this.$(this.tabDot).innerHTML+="<li class='select' onclick='TencentArticl.SildTab("+i+")'></li>";}<br /> else<br /> {<br /> this.$(this.tabDot).innerHTML+="<li onclick='TencentArticl.SildTab("+i+")'></li>";}<br /> }<br /> },<br /> TabChang:function()<br /> {<br /> var eles=this.getEles(this.sideTab.heads,this.sideTab.heads_ele);<br /> var body=this.getEles(this.sideTab.bodys,this.sideTab.bodys_ele);<br /> for(var i=0;i<eles.length;i++)<br /> {<br /> (function(){<br /> var p=i;<br /> eles[p].onmouseover=function()<br /> {<br /> TencentArticl._TabChang(p,body,eles);}<br /> })();<br /> }<br /> },<br /> _TabChang:function(n,body,obj)<br /> {<br /> for(var i=0;i<body.length;i++)<br /> {<br /> if(i==n)<br /> {<br /> body[n].className="block";<br /> obj[n].className="select";<br /> }<br /> else<br /> {<br /> body[i].className="none";<br /> obj[i].className="";<br /> }<br /> }<br /> },<br /> ComList:function()<br /> {<br /> TencntART.JsLoader.load('http://sum.comment.gtimg.com.cn/php_qqcom/gsum.php?site='+TencentArticl.site+'&c_id='+TencentArticl.cmtId+'',function(){setTimeout("_cbSum",0);});},<br /> setFont:function(n){<br /> this.$("Cnt-Main-Article-QQ").style.fontSize=n+"px";},<br /> onload:function(){<br /> if(TencntART.Browser.moz)<br /> {document.addEventListener("DOMContentLoaded",function(){TencentArticl.ints()},null);}<br /> else{<br /> if(document.readyState=="complete")<br /> {TencentArticl.ints();}<br /> else{<br /> document.onreadystatechange=function(){<br /> if(document.readyState=="complete")<br /> {<br /> TencentArticl.ints();<br /> }<br /> }<br /> }<br /> }<br /> },<br /> ints:function(){<br /> mytimer=setInterval("TencentArticl.pagePe("+"'next'"+")",8000);<br /> if(this.isCmt)<br /> {this.ComList();}<br /> if(this.isSild){<br /> this.$(this.tabBox).style.position="relative";<br /> this.$(this.tabSilder).style.position="absolute";<br /> this.$(this.tabSilder).style.left=0+"px";<br /> this.getEles(this.tabId,"span")[1].onclick=function(){TencentArticl.pagePe("next");}<br /> this.getEles(this.tabId,"span")[0].onclick=function(){TencentArticl.pagePe("pre");}<br /> this.smallCk();<br /> }<br /> this.$(this.tabOuterDiv).onmouseover=function() {<br /> clearInterval(mytimer);<br /> }<br /> this.$(this.tabOuterDiv).onmouseout=function() {<br /> mytimer=setInterval("TencentArticl.pagePe("+"'next'"+")",8000);<br /> }<br /> this.$("fontBig").onclick=function(){<br /> TencentArticl.$("fontSmall").style.color="#0B3B8C";<br /> TencentArticl.$("fontBig").style.color="#666";TencentArticl.setFont(18);<br /> }<br /> this.$("fontSmall").onclick=function(){<br /> TencentArticl.$("fontBig").style.color="#0B3B8C";<br /> TencentArticl.$("fontSmall").style.color="#666";<br /> TencentArticl.setFont(14);<br /> }</p> <p> }<br /> }<br /> Object.beget=function(o){var F=function(){};<br /> F.prototype=o;</p> <p> return new F();</p> <p>}<br />