腾讯用的纯JS自动多屏横向滚动图片展示

长长的路常常走走 2010-08-31 12:02:52

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

CSS文件有很多地方是多余的，你可以自行修改，删除。
本文档来自网上。现在沙发上贴出修改后的JS代码，供各位研究。
需整个完整代码的同学请去下面地址下载。
http://download.csdn.net/source/2658083
需浏览效果的同学，请去这里浏览（如果有广告嫌疑，请版主告知，或修改）

...全文

967 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

kqyx_cn 2012-06-03

打赏
举报

可用，谢谢。

长长的路常常走走 2010-10-12

打赏
举报

你是不是没有联网？

youngsince2 2010-10-11

打赏
举报

错误： _cbSum is not defined
源文件：http://sum.comment.gtimg.com.cn/php_qqcom/gsum.php?site=news&c_id=21572303
行：1

我运行怎么有这个错误呀。高手帮忙呀。

长长的路常常走走 2010-09-04

打赏
举报

[Quote=引用 13 楼 theforever 的回复:]
就算有点引导观看的“小嫌疑”，看看那些赏心悦目的图片，转转脑子，轻松一下，也是好的。
只不过前几天头一次看你网址，就觉得似乎写错了吧，按你网站的中文名称，xsborts应该是xsports。在国人来说，可以无所谓不管它，但要国际化的话，可就不好整了。怎么解释都让人家在没听解释前抱有嫌疑。
[/Quote]
没有写错，xports是注册不了的，又不想用cc/cn/.com.cn/等域名，最后选择了它。xsborts和xsports的读音是一样的，并不想办成纯粹的体育网站！

长长的路常常走走 2010-09-03

打赏
举报

的确不错，我已经在我网站多处加了这个代码，每个栏目的最新，最热文章都可以用到

xk1126 2010-09-03

打赏
举报

不错！~用跑马灯也可以做出来！~

xu_diligent 2010-09-03

打赏
举报

好贴就要顶！要学习！要再顶.......

碧海情天-赵亮 2010-09-03

打赏
举报

就算有点引导观看的“小嫌疑”，看看那些赏心悦目的图片，转转脑子，轻松一下，也是好的。
只不过前几天头一次看你网址，就觉得似乎写错了吧，按你网站的中文名称，xsborts应该是xsports。在国人来说，可以无所谓不管它，但要国际化的话，可就不好整了。怎么解释都让人家在没听解释前抱有嫌疑。

碧海情天-赵亮 2010-09-03

打赏
举报

不错，内容先不看，只是这种改进的精神和共享的行为，都是值得赞赏的。
真希望这样的帖子能够占据论坛的主流，而不是让人无奈无语甚至瞠目的。

geaglem 2010-09-03

打赏
举报

good

shadowwayne 2010-09-03

打赏
举报

不想接分的码农，不是好民工啊

root_lee 2010-09-03

打赏
举报

顶一下，接点分

zouhaifeng2012 2010-09-02

打赏
举报

好。。。收藏了。。

长长的路常常走走 2010-08-31

打赏
举报

另外，原文件JS代码无断行，是根据我的理解断行的，难免有错误断行。

长长的路常常走走 2010-08-31

打赏
举报

var TencntART=new Object();

TencntART.Browser={ie:/msie/.test(window.navigator.userAgent.toLowerCase()),

moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),

opera:/opera/.test(window.navigator.userAgent.toLowerCase()),

safari:/safari/.test(window.navigator.userAgent.toLowerCase())};



TencntART.JsLoader={

	load:function(sUrl,fCallback)

	   {

		   var _script=document.createElement('script');

	      _script.setAttribute('charset','gb2312');

		  _script.setAttribute('type','text/javascript');

		  _script.setAttribute('src',sUrl);

		  document.getElementsByTagName('head')[0].appendChild(_script);

		  if(TencntART.Browser.ie)

		  {

			   _script.onreadystatechange=function()

			     {

					 if(this.readyState=='loaded'||this.readyStaate=='complete')

					     {fCallback();}

				  };

		  }

		  else if(TencntART.Browser.moz)

		   {

				  _script.onload=function(){

					  fCallback();

					  };

			}

		 else

		    {

				fCallback();

			}

		 }

};

var TencentArticl=new Object();

TencentArticl={

	$:function(v)

	   {

		   return document.getElementById(v)

		},

	 getEles:function(id,ele)

	   {return this.$(id).getElementsByTagName(ele);},

	 tabId:"sildPicBar",

	 tabDot:"dot",

	 tabBox:"cnt-wrap",

	 tabOuterDiv:"outerDiv",

	 tabSilder:"cnt",

	 tabSilderSon:"li",

	 comtList:"ComList",

	 rightBorder:"silidBarBorder",

	 Count:function()

	  {return this.getEles(this.tabSilder,this.tabSilderSon).length},

	 Now:0,

	 isCmt:true,

	 isSild:true,

	 timer:null,

	 site:'news',

	 mytimer:null,

	 cmtId:'21572303',

	 cmtBase:'comment5',

	 sideTab:{heads:'tabTit',heads_ele:'span',bodys:'tabBody',bodys_ele:'ol'},

	 SildTab:function(now){

		 this.Now=Number(now);

	     if(this.Now>Math.ceil(this.Count()/5)-1)

		    {this.Now=0;}

		else if(this.Now<0)

		   {this.Now=Math.ceil(this.Count()/5)-1;}

        if(parseInt(this.$(this.tabSilder).style.left)>-125*parseInt(this.Now*5))

		   {this.moveR();}

		else{this.moveL();}

        for(var i=0;i<Math.ceil(this.Count()/5);i++)

		   {

			   if(i==this.Now)

			      {

					  this.getEles(this.tabId,"li")[this.Now].className="select";

				   }

				else

				   {

					   this.getEles(this.tabId,"li")[i].className="";

					 }

			}

		},

		moveR:function(setp)

		   {

			   var _curLeft=parseInt(this.$(this.tabSilder).style.left);

			   var _distance=50;

			   if(_curLeft>-124*parseInt(this.Now*5))

			      {

					  this.$(this.tabSilder).style.left=(_curLeft-_distance)+26+"px";

					   window.setTimeout("TencentArticl.moveR()",1);

					}

			},

		moveL:function(setp)

		  {

			  var _curLeft=parseInt(this.$(this.tabSilder).style.left);

			  var _distance=50;

			  if(_curLeft<-125*parseInt(this.Now*5))

			      {

					  this.$(this.tabSilder).style.left=(_curLeft+_distance)-26+"px";

					   window.setTimeout("TencentArticl.moveL()",1);

					}

			},

		 pagePe:function(way)

		   {

			   if(way=="next")

			       {this.Now+=1;this.SildTab(this.Now);}

			   else

			      {this.Now-=1;this.SildTab(this.Now);}

			},

	     smallCk:function()

		    {

				for(var i=0;i<Math.ceil(this.Count()/5);i++)

				    {

						if(i==0)

				           {

						        this.$(this.tabDot).innerHTML+="<li class='select' onclick='TencentArticl.SildTab("+i+")'></li>";}

				       else

					        {

								this.$(this.tabDot).innerHTML+="<li onclick='TencentArticl.SildTab("+i+")'></li>";}

					  }

			 },

		  TabChang:function()

		      {

				  var eles=this.getEles(this.sideTab.heads,this.sideTab.heads_ele);

				  var body=this.getEles(this.sideTab.bodys,this.sideTab.bodys_ele);

				  for(var i=0;i<eles.length;i++)

				      {

						  (function(){

									var p=i;

									eles[p].onmouseover=function()

									      {

											  TencentArticl._TabChang(p,body,eles);}

										   })();

						 }

				},

			_TabChang:function(n,body,obj)

			     {

					 for(var i=0;i<body.length;i++)

					      {

							  if(i==n)

						        {

								   body[n].className="block";

							       obj[n].className="select";

							     }

							 else

							     {

									 body[i].className="none";

									 obj[i].className="";

								  }

							}

					},

			 ComList:function()

			      {

				     TencntART.JsLoader.load('http://sum.comment.gtimg.com.cn/php_qqcom/gsum.php?site='+TencentArticl.site+'&c_id='+TencentArticl.cmtId+'',function(){setTimeout("_cbSum",0);});},

		    setFont:function(n){

				   this.$("Cnt-Main-Article-QQ").style.fontSize=n+"px";},

		    onload:function(){

				  if(TencntART.Browser.moz)

				      {document.addEventListener("DOMContentLoaded",function(){TencentArticl.ints()},null);}

				  else{

					   if(document.readyState=="complete")

					       {TencentArticl.ints();}

					   else{

						        document.onreadystatechange=function(){

									    if(document.readyState=="complete")

										     {

												 TencentArticl.ints();

											 }

								   }

							}

						}

		     },

			ints:function(){

				mytimer=setInterval("TencentArticl.pagePe("+"'next'"+")",8000);

				if(this.isCmt)

				   {this.ComList();}

                if(this.isSild){

					this.$(this.tabBox).style.position="relative";

					this.$(this.tabSilder).style.position="absolute";

					this.$(this.tabSilder).style.left=0+"px";

					this.getEles(this.tabId,"span")[1].onclick=function(){TencentArticl.pagePe("next");}

                    this.getEles(this.tabId,"span")[0].onclick=function(){TencentArticl.pagePe("pre");}

                    this.smallCk();

				 }

				 this.$(this.tabOuterDiv).onmouseover=function() {

					 clearInterval(mytimer);

				 }

				 this.$(this.tabOuterDiv).onmouseout=function() {

					 mytimer=setInterval("TencentArticl.pagePe("+"'next'"+")",8000);

				 }				 

                 this.$("fontBig").onclick=function(){

				    TencentArticl.$("fontSmall").style.color="#0B3B8C";

			        TencentArticl.$("fontBig").style.color="#666";TencentArticl.setFont(18);

				 }

                 this.$("fontSmall").onclick=function(){

					 TencentArticl.$("fontBig").style.color="#0B3B8C";

					 TencentArticl.$("fontSmall").style.color="#666";

					 TencentArticl.setFont(14);

				 }

			  

		      }

	       }

               Object.beget=function(o){var F=function(){};

			   F.prototype=o;

			   

			   

			   return new F();

			   

}