这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
javascript 方面可以选择不断自动循环,或者只循环一次的,点击以后继续循环,或者停止循环
[Ctrl+A 全选 注: 如需引入外部 Js 需刷新才能执行]
- <!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" />
- <title>
- tabs with auto play function
- </title>
- <meta name="Design Corp" content="Agenda" />
- <meta name="robots" content="all" />
- <style type="text/css" media="screen">
- <!-- body,dl,dt,dd{font:12px/1.5em arial;padding:0;margin:0;} body{margin:25px;}
- img{border:0;} a:link{color:#369;text-decoration: none; } a:hover{color:#c83;}
- .tab{zoom:1;overflow:hidden;width:150px;border:1px solid #ccc;} .tab dt{float:left;width:50px;background:
- #eee;text-align: center;padding:2px 0;text-decoration: none;color:#666;cursor:pointer;}
- .tab dt a{text-decoration: none;color:#666;} .tab dt a:hover{text-decoration:
- none;color:#c83;} .tab dt.on, .tab dt.on a, .tab dt:hover{background: #fff;color:#c83;}
- .tab dd{display:none;clear:both;} .tab dd.on{display:block;} .tab dd img{display:block;padding-top:3px;height:
- 93px;width: 150px;} .tab dd a{padding:5px;} -->
- </style>
- <script type="text/javascript">
- < !--window.onload = function() {
- function timertab(t, a) { //t为要应用此函数的tab的id,a初始化时显示的项目的顺序数
- this.obj = document.getElementById(t).getElementsByTagName("dt"); //导航
- this.eles = document.getElementById(t).getElementsByTagName("dd"); //内容
- this.start = a - 1; //初始项目
- this.speed = 2000; //切换间隔
- this.setid = null; //定时器
- var loop = function() { //自动切换
- for (var i = 0,
- j = obj.length; i < j; i++) {
- obj[i].className = "";
- eles[i].className = "";
- }
- obj[start].className = "on";
- eles[start].className = "on";
- setid = setTimeout(loop, speed);
- start++;
- if (start == obj.length) {
- start = 0;
- //clearTimeout(setid);//只循环一次
- }
- };
- loop();
- var clik = function() { //点击
- for (var i = 0; i < obj.length; i++) {
- obj[i].onclick = function() {
- clearTimeout(setid); //停止原来的自动切换
- var inb = this.id.substr(this.id.indexOf("#") + 6, 1); //这里的数字6为dt的id中数字序号出现的位置数
- for (var i = 0,
- j = obj.length; i < j; i++) { //重新初始化
- obj[i].className = "";
- eles[i].className = "";
- }
- this.className = "on"; //显示点击项
- eles[inb - 1].className = "on";
- start = inb - 1; //从这里开始继续循环(可以根据要求选择是否去掉这部分)
- loop();
- return false //取消<a href="#tabs_01">默认事件
- }
- }
- };
- clik();
- }
- timertab("tab_01", 2);
- }
- //-->
- </script>
- </head>
- <body>
- <dl id="tab_01" class="tab">
- <dt id="tab_01">
- <a href="#tabs_01">
- tab_01
- </a>
- </dt>
- <dt id="tab_02">
- <a href="#tabs_02">
- tab_02
- </a>
- </dt>
- <dt id="tab_03">
- <a href="#tabs_03">
- tab_03
- </a>
- </dt>
- <dd id="tabs_01">
- <img class="img-responsive" src="1.jpg" data-src="" />
- <a href="#">
- link1
- </a>
- </dd>
- <dd id="tabs_02">
- <img class="img-responsive" src="2.jpg" data-src="" />
- <a href="#">
- link2
- </a>
- </dd>
- <dd id="tabs_03">
- <img class="img-responsive" src="3.jpg" data-src="" />
- <a href="#">
- link3
- </a>
- </dd>
- </dl>
- </body>
- </html>
- <html>
- <head>
- <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
- <meta name="ProgId" content="FrontPage.Editor.Document">
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>
- a1 a2 a3
- </title>
- <style type="text/css" media="screen">
- <!-- *{font:12px/1.5em arial;} img{border:0;} a:link{color:#369;text-decoration:
- none; } a:hover{color:#c83;} #tt{zoom:1;overflow:hidden;width:152px;border:1px
- solid #ccc;border-width:1px 1px 0;} #tt a{float:left;width:50px;background:
- #eee;text-align: center;padding:2px 0;text-decoration: none;color:#666;
- } #tt a.on, #tt a:hover{background: #fff;color:#c83;} #ct{width:150px;border:1px
- solid #ccc;border-width:0 1px 1px;} #ct div{display:none;} #ct div.on{display:block;}
- #ct img{display:block;padding-top:3px;height: 93px;width: 150px;} #ct a{padding:5px;}
- -->
- </style>
- </head>
- <body>
- <script>
- /*参数说明:
- t:导航容器的ID
- to:导航的单位元素标签
- c:内容的容器ID
- co:内容的单位元素标签
- s:初始化时的当前项
- a:内容的单位元素标签ID中的数字序号的位置<div id="i1">(对应的a为2)
- */
- function timertab(t, to, c, co, s, a) {
- this.obj = document.getElementById(t).getElementsByTagName(to); //导航对象
- this.eles = document.getElementById(c).getElementsByTagName(co); //内容项
- this.start = s - 1; //初始项目
- this.speed = 2000; //切换间隔
- this.setid = null; //定时器
- var loop = function() { //自动切换
- for (var i = 0,
- j = obj.length; i < j; i++) { //初始化
- obj[i].className = "";
- eles[i].className = "";
- }
- obj[start].className = "on"; //当前项
- eles[start].className = "on";
- setid = setTimeout(loop, speed); //开始自动切换
- start++;
- if (start == obj.length) {
- start = 0;
- }
- };
- loop();
- var clik = function() { //点击
- for (var i = 0; i < obj.length; i++) {
- obj[i].onclick = function() {
- clearTimeout(setid); //停止原来的自动切换
- var inb = this.href.substr(this.href.indexOf("#") + a, 1);
- for (var i = 0,
- j = obj.length; i < j; i++) {
- obj[i].className = "";
- eles[i].className = "";
- }
- this.className = "on";
- eles[inb - 1].className = "on";
- /*从点击项开始自动切换,此功能可以选择去掉*/
- start = inb - 1;
- loop();
- }
- }
- };
- clik();
- var m_over = function() { //鼠标指向暂停自动切换
- for (var i = 0; i < obj.length; i++) {
- eles[i].onmouseover = function() {
- clearTimeout(setid)
- };
- }
- };
- m_over();
- var m_out = function() { //鼠标离开继续自动切换
- for (var i = 0; i < obj.length; i++) {
- eles[i].onmouseout = function() {
- setid = setTimeout(loop, speed)
- };
- }
- };
- m_out();
- }
- </script>
- <div>
- <a href="#i1">
- a1
- </a>
- <a href="#i2">
- a2
- </a>
- <a href="#i3">
- a3
- </a>
- </div>
- <div>
- <div>
- <img class="img-responsive" src="http://case.blueidea.com/files/2008/01/31/work_219030_4249_20080131_092244_3681946_t.png"
- data-src="" />
- <a href="http://case.blueidea.com/works/view/4249/" target="_blank">
- 作品4249
- </a>
- </div>
- <div>
- <img class="img-responsive" src="http://case.blueidea.com/files/2008/01/30/work_185979_4240_20080130_144901_6762390_t.jpg"
- data-src="" />
- <a href="http://case.blueidea.com/works/view/4240/" target="_blank">
- 作品4240
- </a>
- </div>
- <div>
- <img class="img-responsive" src="http://case.blueidea.com/files/2008/01/30/work_365161_4245_20080130_202513_1560669_t.jpg"
- data-src="" />
- <a href="http://case.blueidea.com/works/view/4245/" target="_blank">
- 作品4245
- </a>
- </div>
- </div>
- <script type="text/javascript">
- < !--timertab("tt", "a", "ct", "div", 2, 2);
- //-->
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0716/288380.html