<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>tab定时切换</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<style>

#nav_list{ height:25px; width:300px; background:#999;}

#nav_list div{ float:left; width:100px; line-height:25px; text-align:center;}

#nav_list div.cur{ background:#C60; color:#fff;}

#nav_con{ width:298px; border:1px solid #999; height:100px;}

#nav_con div{ display:none;}

</style>

<div id="nav_list">

    <div class="cur">tab1</div>

    <div>tab2</div>

    <div>tab3</div>

</div>

<div id="nav_con">

    <div style="display:block;">tab1tab1tab1tab1tab1tab1tab1</div>

    <div>tab2tab2tab2tab2tab2tab2tab2</div>

    <div>tab3tab3tab3tab3tab3tab3tab3</div>

</div>

<script type="text/javascript">

    var time;//定义定时器

    var i=-1;//定义开始显示的内容，由于下面执行了i++;所以只能给i赋值-1

    var offset=2000;//设置相隔2秒就切换

    var index_n=$('#nav_list>div').length;//获取切换个数

    var nav_top=$('#nav_list>div');

    var nav_con=$('#nav_list + div>div'); //可以写成var nav_con=$('#nav_con>div')

    function roll(){

        i++;

        if(i>index_n){//如果i>切换个数后，重新给i赋值=0

            i=0

        }

        slide(i);

        time=setTimeout(roll,offset);//设置定时器

    }

    function slide(i){

        nav_top.eq(i).addClass('cur').siblings().removeClass('cur');//把当前的div的高亮

        nav_con.eq(i).show().siblings().hide();

    }

    roll();//执行函数

</script>

</body>

</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. CreateLiveCMSV4.0 漏洞，无需后台Get shell

    Title:CreateLiveCMSV4.0 漏洞,无需后台Get shell --2012-03-06 17:28 标题:CreateLive CMS Version 4.0.1006 漏洞,无需 ...

  2. Android 之Service

    service是运行在后台的服务,你可以启动一个服务Service来播放音乐,或者记录你地理信息位置的改变,或者启动一个服务来运行并一直监听某种动作. 接下来分析一下service 的生命周期: 1: ...

  3. 静态编译Qt5.4.1和Qt WebKit

    图灵社区文章地址:http://www.ituring.com.cn/article/195148WebKit是个好东西,做爬虫.显示网页还是想用HTML来做桌面应用的界面都可以用他,不过一直以来都觉 ...

  4. hadoop深入研究:(十八)——Avro schema兼容

    转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/9900129 所有源码在github上,https://github.com/l ...

  5. linux c 之signal 和sigaction区别

    http://blog.csdn.net/muge0913/article/details/7331129 要对一个信号进行处理,就需要给出此信号发生时系统所调用的处理函数.可以对一个特定的信号(除去 ...

  6. JAVA的四种引用,强弱软虚用到的场景

    1.强引用 最常用的引用类型,如Object object = new Object(),只要强引用存在,GC必定 不回收,即使当前内存空间不足,jAVA虚拟机宁愿抛出OutofMemoryError ...

  7. Maven相关介绍

    Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理系统(Depen ...

  8. Django之模板语言

    一.模板语言介绍 模板语言渲染的整个过程其实就是将html转换成函数,并为该函数提供全局变量,然后执行该函数 二.模板语言的语法 模板中也有自己的语言,该语言可以实现数据展示 # 业务请求处理做的页面 ...

  9. 根据请求头跳转判断Android&iOS

    if(navigator.userAgent.match(/Android/i)) { window.location = 'http://apk.hiapk.com/m/downloads?id=c ...

  10. security Export/import

    export [-k keychain] [-t type] [-f format] [-w] [-p format] [-P passphrase] [-o outfile] Export one ...