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. 区别getElementByID,getElementsByName,getElementsByTagName

    以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人.小孩.老人)等. 1. ID 是一个人的身份证号码,是唯一的.所以通过getElementById获取的是指定的一个人. 2. Name ...

  2. Atitit.软件GUI按钮与仪表盘(01)--报警系统--

    Atitit.软件GUI按钮与仪表盘(01)--报警系统-- 1. 温度报警区(鲁大师,360taskman) 1 2. os-区-----cpu_mem_io资源占用监测 1 3. Vm区 1 4. ...

  3. [svc]centos6系统安装(分区)及其18处调优调优最佳实战

    系统下载 在阿里云下载 可以使用最小化的,也可以使用dvd版(CentOS-6.7-x86_64-bin-DVD1.iso),其中dvd版方便安装过程中选包. 一. 系统安装 1,时区选择 2,磁盘分 ...

  4. 商派onex本地部署无法进入的问题

    商派最新版的ONex本地虚拟机部署项目无法进入注册的问题解决 进入项目的database.php文件,复制host的值 vim /etc/hosts,将hosts内容添加到/etc/hosts里面去就 ...

  5. [I2C]pca9555应用层测试代码

    注意点: 如果在设置I2C_SLAVE的时候,提示device_busy,可以使用I2C_SLAVE_FORCE, 在驱动里面二者对应同一个case语句 应用层可以调用接口:i2c_smbus_wri ...

  6. SDRAM基础

    一． 介绍 存储器的最初结构为线性,它在任何时刻,地址线中都只能有一位有效.设容量为N×M的存储器有S0-Sn-1条地址线:当容量增大时,地址选择线的条数也要线性增多,利用地址译码虽然可有效地减少地址 ...

  7. 在.net4的环境下使用Microsoft.AspNet.SignalR.Client 2.4.0

    我的环境是运行在.net 4 framework,并且使用了signalr 在重连的时候发现,运行的服务被关闭了.找不到合适的处理的办法.因为报错是 说明: 由于未经处理的异常,进程终止.异常信息: ...

  8. 如意云路由刷PandoraBox

    目录 1 准备固件 2 使用uboot刷机 2.1 修改IP 2.2 开始刷写 3 ssh登录 4 刷回如意云 准备固件 http://downloads.openwrt.org.cn/Pandora ...

  9. 在后台运行Python脚本服务

    在服务器,程序都是后台运行的,当写的python脚本时,需要:   你要是想python robot.py & 是不行的,一旦用户登出,脚本就自动退出了.用at, cron也可以实现不过我发现 ...

  10. div随页面滚动遇顶固定的两种方法(js&jQuery)

    一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如 ...