js 实现 tab 切换

实现如下效果：

1、图片每1秒钟切换1次。

2、当鼠标停留在整个页面上时，图片不进行轮播。

3、当点击切换页的选项上时，出现该选项的对应图片，而且切换页选项的背景颜色发生相应的变化。

4、当图片发生轮播切换时，在不点击选项卡的前提下，相应的选项卡背景颜色也自动发生变化。

效果图如下：

index.html文件

<!DOCTYPE html>

<html>

<head>

    <title>js导航轮播</title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script type="text/javascript" src="js/script.js"></script>

</head>

<body>

<div class="main" id="main">

    <div class="nav">

        <ul  id="ul">

            <li id="0">首页</li>

            <li id="1">点击看看</li>

            <li id="2">会自动的</li>

            <li id="3">我的网站</li>

        </ul>

    </div>

    <div class="banner" id="banner">

        <a href=""><img src="img/1.jpg" class="banner-slide"/></a>

        <a href=""><img src="img/3.jpg" class="banner-slide"/></a>

        <a href=""><img src="img/4.jpg" class="banner-slide"/></a>

        <a href=""><img src="img/5.jpg" class="banner-slide"/></a>

    </div>

</div>

</body>

</html>

style.css文件

*{margin:;padding:;}

/*导航菜单*/

body{font-family: "Microsoft YaHei";}

.main{width:602px;height:263px;margin: 20px auto;overflow: hidden;}

.nav ul{width: 600px;overflow: hidden;border: 1px solid #f3f3f3;border-bottom: #fc0;}

.nav ul li{float: left;list-style: none;width: 150px;text-align: center;background-color: #fff;padding: 5px 0;border-radius: 5px;cursor: pointer;}

.nav ul .active{background-color: #fc0;font-weight: bold;cursor: pointer;}

/*轮播图*/

.banner{width:602px;overflow: hidden;position: relative;}

img{width: 100%;}

img .banner-slide{vertical-align: bottom;position: absolute;display: none;}

script.js文件

//封装一个代替getElementById()的方法

function $(id){

    return typeof(id) === "string"?document.getElementById(id):id;

}

window.onload=function(){

var index = 0,

    timer = null,

    titles = $("ul").getElementsByTagName("li"),

    pics = $("banner").getElementsByTagName("img"),

    len = pics.length;

    //初始状态设置

    titles[0].className="active";

    pics[0].style.display='block';

//封装一个切换的tab函数

function tab(){

    //鼠标滑过是清除定时器

    $("main").onmouseover=function(){

        if(timer) {clearInterval(timer);}

    }

    //鼠标滑出时继续自动切换

    $("main").onmouseout=function(){timer = setInterval(autoPlay,1000);}

    //遍历li，点击li时跳转到相应页面，并且li样式随之改变

    for(var i=0;i<len;i++){

        titles[i].id=i;

        titles[i].onclick=function(){

            clearInterval(timer);

            changeOption(this.id);

        }

        $("main").onmouseout=function(){

                   timer = setInterval(autoPlay,1000);

        }

    }

    if(timer){

        clearInterval(timer);

        timer=null;

    }

        //添加定时器，实现每隔一秒自动切换

        timer = setInterval(autoPlay,1000);

//封装autoPlay自动切换函数

        function autoPlay(){

            index++;

            if(index >= len){

                index = 0;

            }

          changeOption(index);

        }

//封装changeOption函数

    function changeOption(curIndex){

            for (var j=0;j<len;j++) {

            titles[j].className='';

            pics[j].style.display='none';

        }

        titles[curIndex].className="active";

        pics[curIndex].style.display='block';

        index=curIndex;

    }

}

tab();

}

js Tab切换实例的更多相关文章

  1. JS tab切换事件

    $('ul.main-tab>li').on('mousedown', data, function() { var $this = $(this), $box = $('.main-tab-c ...

  2. JS——tab切换

    排它思想: 1.先让所有的元素恢复默认值 2.再让选中的元素赋专有的值 3.干掉所有人,剩下我一个 <!DOCTYPE html> <html> <head lang=& ...

  3. avalon结合原生js tab切换

    <div class="fishqc-tap"> <div ms-class="[@codePic!=''&&@codeInfo!='' ...

  4. js用户管理中心tab切换界面模板

    效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...

  5. JS实现Tab切换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js或者jq的tab切换

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. 使用swiper.js实现移动端tab切换

    在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...

  8. bootstrap 标签页tab切换js（含报错原因）

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  9. js实现弹出窗口+遮罩层+tab切换

    [功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...

随机推荐

  1. MSSQL如何访问ORACLE里的表

    环境: MSSQL:2008 ORACLE DB:10.2.0.1     之前一直没有接触MSSQL,最近因需要MSSQL访问ORACLE里的表,下面是MSSQL连接ORACLE的配置过程.   1 ...

  2. Atitit.软件gui按钮and面板---通讯子系统(区)-- github 的使用....

    Atitit.软件gui按钮and面板---通讯子系统(区)-- github 的使用.... 1. 1.注册账户以及创建仓库 1 2. 二.在GitHub中创建项目(create a new rep ...

  3. vim -d file01 file02 diff file01 file02 对比两文件的不同

    [root@86 vhosts]# vim -d defaul.conf.bak zabbix.xinxianm.com.conf server { | server { listen 80; | l ...

  4. C# fixed详解

    相信很多人在这样或那样的项目中,或者无意间看到了fixed语句块,看到之后你肯定会疑问: 1.这个fixed关键字是做什么用的? 2.什么情况下需要该关键字? 3.这个关键字该怎么用? 我相信解决了上 ...

  5. Mac里面如何设置自启动服务

    Mac OS x 启动项设置 Mac OS X的启动原理: 1,mac固件激活,初始化硬件,加载BootX引导器. 2,BootX加载内核与内核扩展(kext). 3,内核启动launchd进程. 4 ...

  6. error: invalid use of incomplete type

    一般出现这种情况都是没有将用到的头文件包含进来 我的情况是在头文件中定义了一个QMenu的指针,在源文件中使用menuBar()函数来返回一个menu指针.我在源文件中包含了文件<QtGui&g ...

  7. FileInputStream与FileOutputStream类

    FileInputStream和FileOutputStream类分别用来创建磁盘文件的输入流和输出流对象,通过它们的构造函数来指定文件路径和文件名. 创建FileInputStream实例对象时,指 ...

  8. 高德地图sdk的AMapNavi.getInstance为null解决办法

    问题,动态库没有全部导入,之前我只放到了armeabi下,可是没想到我手机是armeabi-v7a的. 最近做Android项目,先用的是百度地图,可是后来发现百度地图没有提供地图的View点击事件( ...

  9. 转：PHP获取浏览器类型及版本号

    function getBrowser(){ $agent=$_SERVER["HTTP_USER_AGENT"]; if(strpos($agent,'MSIE')!==fals ...

  10. LT和ET模式

    #include <sys/types.h> #include <sys/socket.h> #include <netinet/in.h> #include &l ...