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. Rust 1.7.0 处理命令行參数

    std是 Rust 标准函数库: env 模块提供了处理环境函数. 在使用标准函数库的时候,使用 use 导入对应的 module . 一.直接输出 use std::env; fn main(){ ...

  2. 设置CentOS控制台分辨率图文详解

    最小化安装CentOS,默认是没有图形界面的,这个正合我意.但是命令行界面很小,会有很多输出被迫换行写,影响美观. 那么,怎样调整终端分辨率呢 解决方案:修改引导程序配置 /boot/grub/gru ...

  3. Atitit.网页爬虫的架构总结

    Atitit.网页爬虫的架构总结 1. 总数的结构..(接口方法) 1 2. 获得页数 1 3. 跳页处理(接口方法) 2 4. 单个的页面处理(接口方法) 2 4.1. 获得页面url 3 4.2. ...

  4. angular多个控制器如何共享数据

    多个控制器之间共享数据,通常两种方式,一种是在控制器里通过$scope.$$prevSibling或$scope.$$nextSibling获得另一个控制器的作用域对象. 第二种是通过服务的方式,也是 ...

  5. JS中声明全局变量

    JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量 ...

  6. jdom 读取

    读取XML文档 读取文档,首先需要一个xml的解析器,它可以自动的解析出各个元素,并且把子元素作为自己的孩子节点,方便操作. 主要使用的函数: SAXBuilder.build("xxx.x ...

  7. Linux 新增一个用户命令 adduser

    这几天新增用户老是会用 useradd , 这条命令比较复杂,记录 adduser 这条超级简单的命令. Full name 最后和用户差不多,不然登录的时候不好辨别 附: 新增用户无法 sudo 请 ...

  8. [shell]C语言调用shell脚本接口

    Use popen if you want to run a shell command and want the parent process to be able to talk to the c ...

  9. xeno　实时性能测试　在100us的采样周期的测试数据

    1 xeno 用户层测试时间: root@sama5d3-linux:/usr/bin latency -t0 -T25 -p100== Sampling period: 100 us== Test ...

  10. 深入分析 iBATIS 框架之系统架构与映射原理

    iBATIS 框架主要的类层次结构 总体来说 iBATIS 的系统结构还是比较简单的,它主要完成两件事情: 根据 JDBC 规范建立与数据库的连接: 通过反射打通 Java 对象与数据库参数交互之间相 ...