js 自动切换选项卡效果代码

本文章收藏了一款自动切换选项卡效果,他是利用了js定时来设置tab 选项卡自动切换的,很网大型网站都有这种效果,他可以放文字同时也可以放图片,反正是自动切换吧,放什么内容都可以地。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<script type="text/网页特效" src="js/tab.min.js"></script>
<title>js 自动切换选项卡效果代码</title>
</head>

<body>
<div class="tab" id="tab04">
  <h2>
    <a href="#" class="current">标题0</a>
    <a href="#">标题1</a>
    <a href="#">标题2</a>
    <a href="#">标题3</a>
  </h2>
  <ul>自动播放0</ul>
  <ul style="display:none">自动播放1</ul>
  <ul style="display:none">自动播放2</ul>
  <ul style="display:none">自动播放3</ul>
</div>

<script>
//自动播放tab

slide({
  handle:document.getelementbyid("tab04").getelementsbytagname("h2")[0].getelementsbytagname("a"),
  content:document.getelementbyid("tab04").getelementsbytagname("ul"),
  current:"current",
  mode:"mouseo教程ver",
  speed:1000
});
</script>

<style>
h2{ margin:0;}
ul{ padding:0; margin:0;}

.tab{ width:400px; margin:30px auto 0; font-size:12px; color:#555; border:1px solid #ccc;}
.tab h2{ width:100%; overflow:hidden; font-size:12px; font-weight:normal; background:#f2f2f2;}
.tab h2 span,
.tab h2 a{ float:left; width:50px; line-height:25px; background:#ddd; border-right:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center; cursor:pointer;}
.tab h2 .current{ background:#fff; font-weight:bold; border-bottom:1px solid #fff;}
.tab ul{ padding:25px;}
</style>
</body>
</html>

源码下载地址
http://down.111cn.net/down/code/js/js_tabxuanxiangka/2010/1013/21182.html
效果预览地址
http://g.111cn.net/javascript/code/20101012/tab

时间: 2024-11-01 02:26:00

js 自动切换选项卡效果代码的相关文章

jQuery自动切换/点击切换选项卡效果代码

点击切换和自动切换选项卡 2秒会自动切换 星知苑 点击看看 会自动的 jQuery eq和get区别和使用方法 修改新版本emlog使用老版本kindeditor编辑器 PHP获取网页内容的方法 emlog热门日志修改 [emlog编辑器]TQEditor for emlog emlog后台关键词(keywords)清空bug [emlog编辑器]ueditor for emlog v3.5 [emlog编辑器]xhEditor for emlog 中兴F460光猫破解超级管理员 中兴光纤猫F4

javascript自动切换选项卡效果

欢迎 新闻 介绍 祝福 欢迎你来到我们的网站,JS效果大全欢迎您~ 新闻1+1,快乐属于您 会自动切换的选项卡,很不错. 希望再来,再见!

javascript 切换选项卡效果代码

Tab 1 Tab 2 Tab 3 按钮一 按钮二 按钮三

jQuery实现滚动切换的tab选项卡效果代码_jquery

本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码.分享给大家供大家参考.具体如下: 这里介绍的jquery tab选项卡滚动动态切换代码,似乎很个性的网页选项卡,没有边框的修饰,但十分简约大方,选项卡菜单目前在各大网站很流行,做为前端设计者,能够得心应手的写出一个选项卡是很有必要的哦,希望本代码能为您带去一份参考资料. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-cha-tab-nav-style-

js实现类似菜单风格的TAB选项卡效果代码_javascript技巧

本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再次美化这上选项卡,风格有点类似于菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-menu-style-tab-nav-codes/ 具体代码如下: <html xmlns="ht

JS实现不规则TAB选项卡效果代码_javascript技巧

本文实例讲述了JS实现不规则TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款不规则TAB选项卡效果,将中规中矩的方角换成了不规则的圆角,也就是这一换,倒让浏览者新鲜了不少,也使选项卡增多了几份灵感,不是吗? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-box-tab-nav-style-menu-codes/ 具体代码如下: <html> <head> <meta http-equiv="C

JS实现黑色风格的网页TAB选项卡效果代码_javascript技巧

本文实例讲述了JS实现黑色风格的网页TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款网页TAB选项卡JS代码,黑色超酷的风格,看了后你会喜欢的,很熟悉很经典的风格,似曾相识的感觉,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-style-web-tab-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果_javascript技巧

本文实例讲述了js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果.分享给大家供大家参考.具体如下: 这是一款可在同一页面中多次调用的TAB选项卡代码,仿百度风云榜的TAB切换效果,用到了几张修饰图片,请顺着代码下载所需的图片,然后上传到你的网站中,修改代码内的路径就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-style-tab-cha-codes/ 具体代码如下: <!DOCTYPE html PUBL

JS实现简单的tab切换选项卡效果_javascript技巧

本文实例讲述了JS实现简单的tab切换选项卡效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <m