1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>tab定时切换</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  7. </head>
  8.  
  9. <body>
  10. <style>
  11. #nav_list{ height:25px; width:300px; background:#999;}
  12. #nav_list div{ float:left; width:100px; line-height:25px; text-align:center;}
  13. #nav_list div.cur{ background:#C60; color:#fff;}
  14.  
  15. #nav_con{ width:298px; border:1px solid #999; height:100px;}
  16. #nav_con div{ display:none;}
  17. </style>
  18. <div id="nav_list">
  19.     <div class="cur">tab1</div>
  20.     <div>tab2</div>
  21.     <div>tab3</div>
  22. </div>
  23. <div id="nav_con">
  24.     <div style="display:block;">tab1tab1tab1tab1tab1tab1tab1</div>
  25.     <div>tab2tab2tab2tab2tab2tab2tab2</div>
  26.     <div>tab3tab3tab3tab3tab3tab3tab3</div>
  27. </div>
  28.  
  29. <script type="text/javascript">
  30.     var time;//定义定时器
  31.     var i=-1;//定义开始显示的内容，由于下面执行了i++;所以只能给i赋值-1
  32.     var offset=2000;//设置相隔2秒就切换
  33.     var index_n=$('#nav_list>div').length;//获取切换个数
  34.     var nav_top=$('#nav_list>div');
  35.     var nav_con=$('#nav_list + div>div'); //可以写成var nav_con=$('#nav_con>div')
  36.  
  37.     function roll(){
  38.         i++;
  39.         if(i>index_n){//如果i>切换个数后，重新给i赋值=0
  40.             i=0
  41.         }
  42.         slide(i);
  43.         time=setTimeout(roll,offset);//设置定时器
  44.     }
  45.     function slide(i){
  46.         nav_top.eq(i).addClass('cur').siblings().removeClass('cur');//把当前的div的高亮
  47.         nav_con.eq(i).show().siblings().hide();
  48.     }
  49.  
  50.     roll();//执行函数
  51.  
  52. </script>
  53. </body>
  54. </html>

javascript学习教程之---如何从一个tab切换到banner幻灯片的转换2的更多相关文章

  1. javascript学习教程之---如何从一个tab切换到banner幻灯片的转换

    一个简单的tab切换代码: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  2. javascript学习教程

    我来班门弄斧一下吧,把我JavaScript学习过程中常去的一些网站分享给大家: =========================增加================================ ...

  3. 小程序的一个tab切换

    <view class="tab-left" bindtap="tab"> <view class="{{tabArr.curHdI ...

  4. Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素，如果没有匹配的元素则返回null。

    文章简介:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null. querySelector()方法接受一个CSS查询并返回匹配模式的第 ...

  5. js面向对象学习笔记（五）：tab切换

    重点是this指向问题 <style> .hide{display: none;} #box div,#box1 div{display: none;} .hover{background ...

  6. sweiper做一个tab切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 自己定义一个tab指令

    定义一个tab切换的指令: 指令的文件结构: Js/directives/tab tab.html tab.js tab.html: <style> .my-li-style{ line- ...

  8. Js 实现tab切换效果

    今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的

  9. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

随机推荐

  1. MMDrawerController 使用遇到的问题及定制

    MMDrawerController 1,集成UIViewController * leftDrawer = [[UIViewController alloc] init]; UIViewContro ...

  2. 采访：Go语言编程

    Go语言是由Google在2009年11月份公布的,它的目标是要应对软件开发所面临的最新挑战.Go语言特别被设计为快速(包括在编译时).支持多核的语言,并且兼顾了动态语言的简单性和静态类型语言的安全性 ...

  3. Entity Framework with MySQL 学习笔记一(乐观并发)

    在做项目时,通常我们对乐观并发有几种处理模式 1. 告诉用户此数据已被其他人捷足先登,更改了.你就算新一下重来吧. 2.直接把数据覆盖上去,我最大. 3.用被人的数据. 这里给出 code first ...

  4. ural 1294 Mars Satellites

    #include <cstdio> #include <cstring> #include <cmath> #include <algorithm> u ...

  5. 如何关闭Altium Designer联网功能（图文教程）

    画PCB电路板的人们都知道Altium Designer这款软件,本文介绍如何避免收到Attorney,关掉Altium Designer 的自动联网功能,需要两步,介绍如下 打开AD软件, DXP- ...

  6. DLL模块例2：使用__declspec(dllexport)导出函数，extern "C"规范修饰名称，隐式连接调用dll中函数

    以下内容,我看了多篇文章,整合在一起,写的一个例子,关于dll工程的创建,请参考博客里另一篇文章:http://www.cnblogs.com/pingge/articles/3153571.html ...

  7. hdu-1598

    思路: 首先如果想到了Kruskal算法,那么下一步我们可能马上会想:那我们就从头开始写这个算法吧.然后一写就很容易发现一个问题——如果按照正常的Kruskal算法来做,那么start到end的舒适度 ...

  8. 鼠标点击DIV后，DIV的背景变色（js）

    <!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs ...

  9. javaCV：爱之初体验

    最近实验室有了新任务,要求使用java进行模式识别,在具体点就是人脸识别.精确的边缘检测. 第一个问题便是环境配置,搭建工作台.(其实也不是什么难事,但是本人虽然从事较多的java开发,但很少接触模式 ...

  10. C语言union关键字

    union 关键字的用法与struct 的用法非常类似. union 维护足够的空间来置放多个数据成员中的“一种”,而不是为每一个数据成员配置空间,在union 中所有的数据成员共用一个空间,同一时间 ...