仿腾讯网图文选项卡定时切换显示js特效

4个月前 (06-04 17:27)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

仿腾讯网上的图文选项卡切换显示特效，这个选项卡定时切换显示，并兼容主流浏览器，结合自己的需求来修改即可。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv=Content-Type content=text/html;charset=gb2312>
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<TITLE>仿腾讯网图文选项卡定时切换显示js特效_武鸣人</TITLE>
<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>
<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(/img/20240604_www_wuming_ren_8.gif)
}
.zt .a2 A {
 PADDING-RIGHT: 2px; MARGIN-TOP: 3px; DISPLAY: block; PADDING-LEFT: 11px; BACKGROUND: url(/img/20240604_www_wuming_ren_9.gif); PADDING-BOTTOM: 2px; WIDTH: 148px; CURSOR: pointer; COLOR: #666666; PADDING-TOP: 3px; HEIGHT: 27px; TEXT-DECORATION: none
}
</style>
</HEAD>
<BODY link=#004bca>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<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="https://wuming.ren" target=_blank><IMG class=lin4 width="180px" height="180px" src="/img/20240604_www_wuming_ren_2.jpg"></A></TD>
    <TD vAlign=top>
<A class=T style="FONT-WEIGHT: bold" href="https://wuming.ren" target=_blank>精彩问题</A><BR><BR><A class=T style="FONT-WEIGHT: bold; COLOR: #e57b01" href="https://wuming.ren" target=_blank>敞开心灵让你偷窥</A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://www.wuming.ren" target=_blank>17.8岁的中学生对性都感到好奇，这种现象正…</A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://wuming.ren" target=_blank>新的恋情在心里是否永远无法取代原来的？</A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://wuming.ren" target=_blank>为什么女人的依靠心理要比男人的强呢？</A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://www.wuming.ren" 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="https://www.wuming.ren" target=_blank><IMG class=lin4 width="180px" height="180px" src="/img/20240604_www_wuming_ren_3.jpg"></A></TD>
    <TD vAlign=top><A class=T style="FONT-WEIGHT: bold" href="https://wuming.ren" target=_blank>精彩问题</A> <BR><BR>
<A class=T style="FONT-WEIGHT: bold; COLOR: #e57b01" href="https://wuming.ren/" target=_blank>秋冬热辣长靴巧搭</A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://wuming.ren" target=_blank>在现在的这个季节适合穿什么样式和颜色的靴子？</A><BR><BR class=x><SPAN class=py></SPAN>
  <A href="https://www.wuming.ren" target=_blank>我也喜欢靴子可是不敢穿，怎么办？</A><BR><BR class=x><SPAN class=py></SPAN>
  <A href="https://www.wuming.ren" target=_blank>请问棕色的长外套佩什么颜色的靴子比较好？</A><BR><BR class=x><SPAN class=py></SPAN>
  <A href="https://www.wuming.ren" target=_blank>武鸣人？www.wuming.ren</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="https://wuming.ren" target=_blank><IMG class=lin4 width="180px" height="180px" src="/img/20240604_www_wuming_ren_4.jpg"></A></TD>
    <TD vAlign=top>
<A class=T style="FONT-WEIGHT: bold" href="https://wuming.ren" target=_blank>精彩问题</A> <BR><BR>
<A class=T style="FONT-WEIGHT: bold; COLOR: #e57b01" href="https://wuming.ren/" target=_blank>施瓦辛格等等我</A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://www.wuming.ren" target=_blank>怎么锻炼成像WWE里大块头兵哥的身材？</A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://www.wuming.ren" target=_blank>买个跑步机，还是办张健身卡？ </A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://wuming.ren/" target=_blank>练上健身器械身体会有肌肉轮廓吗？</A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://wuming.ren/" 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="https://www.wuming.ren" target=_blank><IMG class=lin4 width="180px" height="180px" src="/img/20240604_www_wuming_ren_5.jpg"></A></TD>
    <TD vAlign=top><A class=T style="FONT-WEIGHT: bold" href="https://wuming.ren" target=_blank>精彩知识</A> <BR><BR>
<A class=T style="FONT-WEIGHT: bold; COLOR: #e57b01" href="https://www.wuming.ren" target=_blank>这个圣诞去欧洲吧</A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://wuming.ren" target=_blank>圣诞节去欧洲酒店价格会贵吗？</A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://www.wuming.ren" target=_blank>去欧洲买东西，一般都有些什么优惠？</A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://www.wuming.ren" target=_blank>欧洲有租自行车的吗？</A><BR><BR class=x><SPAN class=py></SPAN>
<A href="https://www.wuming.ren" 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="https://www.wuming.ren" target=_blank><IMG class=lin4 width="180px" height="180px" src="/img/20240604_www_wuming_ren_6.jpg"></A></TD>
    <TD vAlign=top><A class=T style="FONT-WEIGHT: bold" href="https://wuming.ren" target=_blank>名人问问</A><BR class=x><BR>
<A class=T style="FONT-WEIGHT: bold; COLOR: #e57b01" href="https://www.wuming.ren" target=_blank>股票专家现身解疑</A><BR><BR class=x><SPAN style="COLOR: rgb(51,51,51); LINE-HEIGHT: 150%">别说你不炒股，别说你不想赚钱！更别说你不知道大盘、个股、QDII……关于动荡的大盘，关于火热的个股和神秘的境外投资，问问特邀股天下专家，让你打…[<A style="TEXT-DECORATION: underline" href="https://www.wuming.ren" target=_blank>详细</A>]</SPAN><BR><BR class=x2><SPAN class=py></SPAN>
<A href="https://wuming.ren/" 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());}
 }//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
 function scrollTopHome(){
  if(pause) return;
  startIndex += 1;
  if(startIndex > con_num){startIndex = 1;}
  setTab('tophome',5,startIndex,'a1','a2');
 }//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
 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="https://www.wuming.ren"><IMG style="MARGIN-RIGHT: 5px" width="20px" height="20px" src="/img/20240604_www_wuming_ren_7.gif" 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="https://www.wuming.ren"><IMG style="MARGIN-RIGHT: 5px" width="20px" height="20px" src="/img/20240604_www_wuming_ren_7.gif" 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="https://www.wuming.ren"><IMG style="MARGIN-RIGHT: 5px" width="20px" height="20px" src="/img/20240604_www_wuming_ren_7.gif" 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="https://www.wuming.ren"><IMG style="MARGIN-RIGHT: 5px" width="20px" height="20px" src="/img/20240604_www_wuming_ren_7.gif" 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="https://www.wuming.ren"><IMG style="MARGIN-RIGHT: 5px" width="20px" height="20px" src="/img/20240604_www_wuming_ren_7.gif" align=absMiddle>股票专家现身解疑</A> </LI></UL></TD></TR></TBODY></TABLE></SPAN></DIV>
</DIV>
<!-- HitCount: 114286 -->
</DIV>
</DIV>
</BODY>
</HTML>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/1122.html

定时切换
回帖

仿腾讯网图文选项卡定时切换显示js特效 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息