来自腾讯搜搜问问的经典图文轮换效果

[作者:月可整理|来源:赛酷网|时间:2008-06-06| 收藏投稿 ]【大中小】

来自腾讯搜搜问问的经典图文轮换效果

运行代码框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>搜搜问问</TITLE> <META http-equiv=Content-Type content=text/html;charset=utf-8> <SCRIPT language=JavaScript type=text/javascript> function setTab(/*string*/name,/*int*/ itemCnt,/*int*/ curItem, /**/classHide, /**/classShow) { for(i=1;i<=itemCnt;i++) { eval("document.getElementById('tab_" + name + "_" + i + "').className='" + classHide + "'"); } eval("document.getElementById('tab_" + name + "_" + curItem + "').className='" + classShow + "'"); for(i=1;i<=itemCnt;i++) { eval("ele_hide = document.getElementById('con_" + name + "_" + i +"')"); if(ele_hide) ele_hide.style.display = "none"; } eval("ele_play = document.getElementById('con_" + name + "_" + curItem + "')"); if(ele_play) ele_play.style.display = "block"; } </SCRIPT> </HEAD> <BODY link=#004bca> <style type="text/css"> BODY { FONT-SIZE: 12px; BACKGROUND: #fff; MARGIN: 0px; COLOR: #666666; FONT-FAMILY: Arial,Verdana; TEXT-ALIGN: left } TD { FONT-SIZE: 12px } P { FONT-SIZE: 12px } DIV { FONT-SIZE: 12px } IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px } .lin1 { BORDER-RIGHT: #b5cfe8 1px solid; BORDER-TOP: #b5cfe8 1px solid; BACKGROUND: #e7f5ff; BORDER-LEFT: #b5cfe8 1px solid; BORDER-BOTTOM: 0px } .lin2 { BORDER-RIGHT: #f7cf9e 1px solid; BORDER-TOP: #f7cf9e 1px solid; BACKGROUND: #fcf0da; BORDER-LEFT: #f7cf9e 1px solid; BORDER-BOTTOM: 0px } .lin3 { BORDER-RIGHT: #f7cf9e 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #f7cf9e 1px solid; BORDER-BOTTOM: #f7cf9e 1px solid } .lin4 { BORDER-RIGHT: #b5cfe8 1px solid; BORDER-TOP: #b5cfe8 1px solid; BORDER-LEFT: #b5cfe8 1px solid; BORDER-BOTTOM: #b5cfe8 1px solid } .lin5 { BORDER-RIGHT: #b5cfe8 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #b5cfe8 1px solid; PADDING-LEFT: 8px; PADDING-BOTTOM: 4px; BORDER-LEFT: #b5cfe8 1px solid; WIDTH: 486px; PADDING-TOP: 3px; BORDER-BOTTOM: #b5cfe8 1px solid } A.tex3 { COLOR: #e37d00 } A.tex4 { COLOR: #666666 } .py { MARGIN: 0px 5px 0px 1px; COLOR: #e57b01 } .x { LINE-HEIGHT: 50% } .x2 { LINE-HEIGHT: 70% } .ctl { TABLE-LAYOUT: fixed } .ctl TD { OVERFLOW: hidden; WHITE-SPACE: nowrap; TEXT-OVERFLOW: ellipsis } .jt { FONT-WEIGHT: bold; COLOR: #ff6600; FONT-FAMILY: Verdana } .zt UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 148px; PADDING-TOP: 0px } .zt LI { WIDTH: 148px; LIST-STYLE-TYPE: none; HEIGHT: 27px } .zt .a1 A { PADDING-RIGHT: 2px; MARGIN-TOP: 3px; DISPLAY: block; PADDING-LEFT: 11px; PADDING-BOTTOM: 2px; WIDTH: 148px; CURSOR: pointer; COLOR: #666666; PADDING-TOP: 3px; HEIGHT: 27px; TEXT-DECORATION: none } .zt .a1 A:hover { BACKGROUND: url(http://cache.soso.com/wenwen/i/n-tbg1.gif) } .zt .a2 A { PADDING-RIGHT: 2px; MARGIN-TOP: 3px; DISPLAY: block; PADDING-LEFT: 11px; BACKGROUND: url(http://cache.soso.com/wenwen/i/n-tbg2.gif); PADDING-BOTTOM: 2px; WIDTH: 148px; CURSOR: pointer; COLOR: #666666; PADDING-TOP: 3px; HEIGHT: 27px; TEXT-DECORATION: none } </style> <DIV style="BORDER-RIGHT: #b5cfe8 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #b5cfe8 1px solid; PADDING-LEFT: 3px; BACKGROUND: #e7f5ff; FLOAT: left; PADDING-BOTTOM: 3px; BORDER-LEFT: #b5cfe8 1px solid; WIDTH: 698px; PADDING-TOP: 3px; BORDER-BOTTOM: #b5cfe8 1px solid"> <DIV id=con_show style="PADDING-RIGHT: 9px; PADDING-LEFT: 9px; BACKGROUND: #ffffff; PADDING-BOTTOM: 4px; WIDTH: 690px; PADDING-TOP: 9px"> <SPAN ch="k4"> <DIV id=con_tophome_1 style="DISPLAY: block"> <TABLE style="FLOAT: left; WIDTH: 76%; MARGIN-RIGHT: 10px" cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD vAlign=top width=200><A href="http://wenwen.soso.com/z/SearchPending.e?sp=S%E5%BF%83%E7%90%86&sp=0" target=_blank><IMG class=lin4 src="http://wenwen.soso.com/p/20071115094514-575688421.jpg"></A></TD> <TD vAlign=top><A class=T style="FONT-WEIGHT: bold" href="http://wenwen.soso.com/z/TopQuestionKnowledge.htm" target=_blank>精彩问题</A> <BR><BR><A class=T style="FONT-WEIGHT: bold; COLOR: #e57b01" href="http://wenwen.soso.com/z/SearchPending.e?sp=S%E5%BF%83%E7%90%86&sp=0" target=_blank>敞开心灵让你偷窥</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=16961106" target=_blank>17.8岁的中学生对性都感到好奇，这种现象正…</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=16966014" target=_blank>新的恋情在心里是否永远无法取代原来的？</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=16957421" target=_blank>为什么女人的依靠心理要比男人的强呢？</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=16958595" target=_blank>生活中没有了方向感该怎么办啊？</A> </TD></TR></TBODY></TABLE></DIV> <DIV id=con_tophome_2 style="DISPLAY: none"> <TABLE style="FLOAT: left; WIDTH: 76%; MARGIN-RIGHT: 10px" cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD vAlign=top width=200><A href="http://wenwen.soso.com/z/SearchPending.e?sp=S%E9%9D%B4%E5%AD%90&sp=0" target=_blank><IMG class=lin4 src="http://wenwen.soso.com/p/20071115100855-452766762.jpg"></A></TD> <TD vAlign=top><A class=T style="FONT-WEIGHT: bold" href="http://wenwen.soso.com/z/TopQuestionKnowledge.htm" target=_blank>精彩问题</A> <BR><BR><A class=T style="FONT-WEIGHT: bold; COLOR: #e57b01" href="http://wenwen.soso.com/z/SearchPending.e?sp=S%E9%9D%B4%E5%AD%90&sp=0" target=_blank>秋冬热辣长靴巧搭</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/q17008042.htm" target=_blank>在现在的这个季节适合穿什么样式和颜色的靴子？</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/q16134134.htm" _fcksavedurl="http://wenwen.soso.com/z/q16134134.htm" target=_blank>我也喜欢靴子可是不敢穿，怎么办？</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/q15106477.htm" _fcksavedurl="http://wenwen.soso.com/z/q15106477.htm" target=_blank>请问棕色的长外套佩什么颜色的靴子比较好？</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/q17002953.htm" _fcksavedurl="http://wenwen.soso.com/z/q17002953.htm" target=_blank>男士的靴子应该配什么样的衣服？</A> </TD></TR></TBODY></TABLE></DIV> <DIV id=con_tophome_3 style="DISPLAY: none"> <TABLE style="FLOAT: left; WIDTH: 76%; MARGIN-RIGHT: 10px" cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD vAlign=top width=200><A href="http://wenwen.soso.com/z/SearchSolved.e?sp=S%E5%81%A5%E8%BA%AB&ch=k2" target=_blank><IMG class=lin4 src="http://wenwen.soso.com/p/20071114102807-155136482.jpg"></A></TD> <TD vAlign=top><A class=T style="FONT-WEIGHT: bold" href="http://wenwen.soso.com/z/TopQuestionKnowledge.htm" target=_blank>精彩问题</A> <BR><BR><A class=T style="FONT-WEIGHT: bold; COLOR: #e57b01" href="http://wenwen.soso.com/z/SearchSolved.e?sp=S%E5%81%A5%E8%BA%AB&ch=k2" target=_blank>施瓦辛格等等我</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=14677092" target=_blank>怎么锻炼成像WWE里大块头兵哥的身材？</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=16665427" target=_blank>买个跑步机，还是办张健身卡？ </A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=13516248" target=_blank>练上健身器械身体会有肌肉轮廓吗？</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=15426043" target=_blank>钢管秀到底是不是健身运动？</A> </TD></TR></TBODY></TABLE></DIV> <DIV id=con_tophome_4 style="DISPLAY: none"> <TABLE style="FLOAT: left; WIDTH: 76%; MARGIN-RIGHT: 10px" cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD vAlign=top width=200><A href="http://cache.soso.com/wenwen/classic1/classic_shengdan.htm" target=_blank><IMG class=lin4 src="http://wenwen.soso.com/p/20071112132535-1097111654.jpg"></A></TD> <TD vAlign=top><A class=T style="FONT-WEIGHT: bold" href="http://cache.soso.com/wenwen/classic1/classic1.htm" target=_blank>精彩知识</A> <BR><BR><A class=T style="FONT-WEIGHT: bold; COLOR: #e57b01" href="http://cache.soso.com/wenwen/classic1/classic_shengdan.htm" target=_blank>这个圣诞去欧洲吧</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=15081345" target=_blank>圣诞节去欧洲酒店价格会贵吗？</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=15081693" target=_blank>去欧洲买东西，一般都有些什么优惠？</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=15359432" target=_blank>欧洲有租自行车的吗？</A><BR><BR class=x><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=15360012" target=_blank>我能在圣诞节期间自己坐火车从法国去英国吗？</A> </TD></TR></TBODY></TABLE></DIV> <DIV id=con_tophome_5 style="DISPLAY: none"> <TABLE style="FLOAT: left; WIDTH: 76%; MARGIN-RIGHT: 10px" cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD vAlign=top width=200><A href="http://cache.soso.com/wenwen/askstar_n/askstar25.htm" target=_blank><IMG class=lin4 src="http://wenwen.soso.com/p/20071112105344-2010456491.jpg"></A></TD> <TD vAlign=top><A class=T style="FONT-WEIGHT: bold" href="http://cache.soso.com/wenwen/classic1/people1.htm" target=_blank>名人问问</A><BR class=x><BR><A class=T style="FONT-WEIGHT: bold; COLOR: #e57b01" href="http://cache.soso.com/wenwen/askstar_n/askstar25.htm" target=_blank>股票专家现身解疑</A><BR><BR class=x><SPAN style="COLOR: rgb(51,51,51); LINE-HEIGHT: 150%">别说你不炒股，别说你不想赚钱！更别说你不知道大盘、个股、QDII……关于动荡的大盘，关于火热的个股和神秘的境外投资，问问特邀股天下专家，让你打…[<A style="TEXT-DECORATION: underline" href="http://cache.soso.com/wenwen/askstar_n/askstar25.htm" target=_blank>详细</A>]</SPAN><BR><BR class=x2><SPAN class=py>•</SPAN><A href="http://wenwen.soso.com/z/ShowQuestion.e?sp=15338035" target=_blank>你最想问专家的H股及境外投资方面的问题是什么？</A> </TD></TR></TBODY></TABLE></DIV> <SCRIPT type=text/javascript> var pause = false; var con_num = 5; var startIndex = 1; function setLoop(){ try{ var oScroll = document.getElementById('con_show'); oScroll.noWrap = true; oScroll.onmouseover = function(e){pause = true;}; oScroll.onmouseout = function(e){pause = false;}; setInterval('scrollTopHome()', 5000); }catch(e){alert(e.toString());} } function scrollTopHome(){ if(pause) return; startIndex += 1; if(startIndex > con_num){startIndex = 1;} setTab('tophome',5,startIndex,'a1','a2'); } setLoop(); </SCRIPT> <TABLE style="FLOAT: left" cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD class=zt> <UL> <LI class=a2 id=tab_tophome_1 onclick="startIndex=1;setTab('tophome',5,1,'a1','a2');"><A onclick="return false;" href="http://wenwen.soso.com/z/"><IMG style="MARGIN-RIGHT: 5px" src="http://wenwen.soso.com/p/pre-20071115094514-575688421.jpg" align=absMiddle>敞开心灵让你偷窥</A> </LI> <LI class=a1 id=tab_tophome_2 onclick="startIndex=2;setTab('tophome',5,2,'a1','a2');"><A onclick="return false;" href="http://wenwen.soso.com/z/"><IMG style="MARGIN-RIGHT: 5px" src="http://wenwen.soso.com/p/pre-20071115100855-452766762.jpg" align=absMiddle>秋冬热辣长靴巧搭</A> </LI> <LI class=a1 id=tab_tophome_3 onclick="startIndex=3;setTab('tophome',5,3,'a1','a2');"><A onclick="return false;" href="http://wenwen.soso.com/z/"><IMG style="MARGIN-RIGHT: 5px" src="http://wenwen.soso.com/p/pre-20071114102807-155136482.jpg" align=absMiddle>施瓦辛格等等我</A> </LI> <LI class=a1 id=tab_tophome_4 onclick="startIndex=4;setTab('tophome',5,4,'a1','a2');"><A onclick="return false;" href="http://wenwen.soso.com/z/"><IMG style="MARGIN-RIGHT: 5px" src="http://wenwen.soso.com/p/pre-20071112132535-1097111654.jpg" align=absMiddle>这个圣诞去欧洲吧</A> </LI> <LI class=a1 id=tab_tophome_5 onclick="startIndex=5;setTab('tophome',5,5,'a1','a2');"><A onclick="return false;" href="http://wenwen.soso.com/z/"><IMG style="MARGIN-RIGHT: 5px" src="http://wenwen.soso.com/p/pre-20071112105344-2010456491.jpg" align=absMiddle>股票专家现身解疑</A> </LI></UL></TD></TR></TBODY></TABLE></SPAN></DIV> </DIV>  </DIV> </DIV> </BODY></HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Tags：图文轮换

顶一下

上一篇：超经典的滑轮新闻显示效果

下一篇：最新chinaz的导航条效果