帶控制按鈕的jQuery滾動代碼

2009-05-30　來源/作者：懶人圖庫　分類：文字特效　 «»

<!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   class="trrdnfn"   id=con_show 
style="PADDING-RIGHT: 9px; PADDING-LEFT: 9px; BACKGROUND: #ffffff; PADDING-BOTTOM: 4px; WIDTH: 690px; PADDING-TOP: 9px">
<SPAN ch="k4">
<div   class="l7fr5fz"   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 
       
      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" 
       
      target=_blank>精彩問題</A> <BR><BR><A class=T 
      style="FONT-WEIGHT: bold; COLOR: #e57b01" 
       
      target=_blank>敞開心靈讓你偷窺</A><BR><BR class=x><span id="nnxrdhl"    class=py>•</SPAN><A 
       
      target=_blank>17.8歲的中學生對性都感到好奇，這種現象正…</A><BR><BR class=x><SPAN 
      class=py>•</SPAN><A 
       
      target=_blank>新的戀情在心里是否永遠無法取代原來的？</A><BR><BR class=x><SPAN 
      class=py>•</SPAN><A 
       
      target=_blank>為什么女人的依靠心理要比男人的強呢？</A><BR><BR class=x><SPAN 
      class=py>•</SPAN><A 
       
      target=_blank>生活中沒有了方向感該怎么辦啊？</A> </TD></TR></TBODY></TABLE></DIV>
<div   class="r7bzjzr"   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 
       
      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" 
       
      target=_blank>精彩問題</A> <BR><BR><A class=T 
      style="FONT-WEIGHT: bold; COLOR: #e57b01" 
       
      target=_blank>秋冬熱辣長靴巧搭</A><BR><BR class=x><span id="zpl5fvz"    class=py>•</SPAN><A 
       
      target=_blank>在現在的這個季節適合穿什么樣式和顏色的靴子？</A><BR><BR class=x><SPAN 
      class=py>•</SPAN><A  
      target=_blank>我也喜歡靴子可是不敢穿，怎么辦？</A><BR><BR class=x><SPAN 
      class=py>•</SPAN><A  
      target=_blank>請問棕色的長外套佩什么顏色的靴子比較好？</A><BR><BR class=x><SPAN 
      class=py>•</SPAN><A  
      target=_blank>男士的靴子應該配什么樣的衣服？</A> </TD></TR></TBODY></TABLE></DIV>
<div   class="pl5xhbr"   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 
       
      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" 
       
      target=_blank>精彩問題</A> <BR><BR><A class=T 
      style="FONT-WEIGHT: bold; COLOR: #e57b01" 
       
      target=_blank>施瓦辛格等等我</A><BR><BR class=x><span id="h5r7xzd"    class=py>•</SPAN><A 
       
      target=_blank>怎么鍛煉成像WWE里大塊頭兵哥的身材？</A><BR><BR class=x><SPAN 
      class=py>•</SPAN><A 
       
      target=_blank>買個跑步機，還是辦張健身卡？ </A><BR><BR class=x><span id="fb5pn5t"    class=py>•</SPAN><A 
       
      target=_blank>練上健身器械身體會有肌肉輪廓嗎？</A><BR><BR class=x><SPAN 
      class=py>•</SPAN><A 
       
      target=_blank>鋼管秀到底是不是健身運動？</A> </TD></TR></TBODY></TABLE></DIV>
<div   class="tbzjtnh"   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 
       
      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" 
       
      target=_blank>精彩知識</A> <BR><BR><A class=T 
      style="FONT-WEIGHT: bold; COLOR: #e57b01" 
       
      target=_blank>這個圣誕去歐洲吧</A><BR><BR class=x><span id="rn5tbft"    class=py>•</SPAN><A 
       
      target=_blank>圣誕節去歐洲酒店價格會貴嗎？</A><BR><BR class=x><span id="ppb7555"    class=py>•</SPAN><A 
       
      target=_blank>去歐洲買東西，一般都有些什么優惠？</A><BR><BR class=x><SPAN 
      class=py>•</SPAN><A 
       
      target=_blank>歐洲有租自行車的嗎？</A><BR><BR class=x><span id="75hxhl5"    class=py>•</SPAN><A 
       
      target=_blank>我能在圣誕節期間自己坐火車從法國去英國嗎？</A> </TD></TR></TBODY></TABLE></DIV>
<div   class="ppl7xpf"   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 
       
      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" 
       
      target=_blank>名人問問</A><BR class=x><BR><A class=T 
      style="FONT-WEIGHT: bold; COLOR: #e57b01" 
       
      target=_blank>股票專家現身解疑</A><BR><BR class=x><SPAN 
      style="COLOR: rgb(51,51,51); LINE-HEIGHT: 150%">別說你不炒股，別說你不想賺錢！更別說你不知道大盤、個股、QDII……關于動蕩的大盤，關于火熱的個股和神秘的境外投資，問問特邀股天下專家，讓你打…[<A 
      style="TEXT-DECORATION: underline" 
       
      target=_blank>詳細</A>]</SPAN><BR><BR class=x2><span id="jtdzbtz"    class=py>•</SPAN><A 
       
      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 id="3z5hfxd"    class=a2 id=tab_tophome_1 
        onclick="startIndex=1;setTab('tophome',5,1,'a1','a2');"><A 
        onclick="return false;" ><IMG 
        style="MARGIN-RIGHT: 5px" 
        src="http://wenwen.soso.com/p/pre-20071115094514-575688421.jpg" 
        align=absMiddle>敞開心靈讓你偷窺</A> </LI>
        <li id="nz7xjzr"    class=a1 id=tab_tophome_2 
        onclick="startIndex=2;setTab('tophome',5,2,'a1','a2');"><A 
        onclick="return false;" ><IMG 
        style="MARGIN-RIGHT: 5px" 
        src="http://wenwen.soso.com/p/pre-20071115100855-452766762.jpg" 
        align=absMiddle>秋冬熱辣長靴巧搭</A> </LI>
        <li id="djfpxbr"    class=a1 id=tab_tophome_3 
        onclick="startIndex=3;setTab('tophome',5,3,'a1','a2');"><A 
        onclick="return false;" ><IMG 
        style="MARGIN-RIGHT: 5px" 
        src="http://wenwen.soso.com/p/pre-20071114102807-155136482.jpg" 
        align=absMiddle>施瓦辛格等等我</A> </LI>
        <li id="nrn7hvl"    class=a1 id=tab_tophome_4 
        onclick="startIndex=4;setTab('tophome',5,4,'a1','a2');"><A 
        onclick="return false;" ><IMG 
        style="MARGIN-RIGHT: 5px" 
        src="http://wenwen.soso.com/p/pre-20071112132535-1097111654.jpg" 
        align=absMiddle>這個圣誕去歐洲吧</A> </LI>
        <li id="jzv55lr"    class=a1 id=tab_tophome_5 
        onclick="startIndex=5;setTab('tophome',5,5,'a1','a2');"><A 
        onclick="return false;" ><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>

運行代碼保存代碼提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

標簽：文字特效