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. ubuntu下查找jdk安装位置

    which javac 返回/usr/bin/javac file /usr/bin/javac 返回/usr/bin/javac: symbolic link to `/etc/alternativ ...

  2. 【转】Appium_API（翻译+用法说明）

    转自:https://testerhome.com/topics/3711 1.contextscontexts(self): Returns the contexts within the curr ...

  3. Coreseek:第一步配置文件

    Windows操作系统下:mysql数据源配置:(相应coreseek-3.2.13-win32/etc/csft_mysql.conf) #源定义 source mysql { type = mys ...

  4. video标签常用属性及说明

    video标签常用属性(在标签内部使用) video常用API属性及方法(API属性是供JS调用的,不在video标签元素中直接使用)

  5. ThreadPoolExecutor线程池解析与BlockingQueue的三种实现

    目的 主要介绍ThreadPoolExecutor的用法,和较浅显的认识,场景的使用方案等等,比较忙碌,如果有错误还请大家指出 ThreadPoolExecutor介绍 ThreadPoolExecu ...

  6. js　開始时间，当前时间，结束时间的比較

    //開始时间不能小于当前时间 function startTimeIsBigThanTotay(startTime){ var startdate = new Date((startTime).rep ...

  7. Python解析xml文件遇到的编码解析的问题

    使用python对xml文件进行解析的时候,假设xml文件的头文件是utf-8格式的编码,那么解析是ok的,但假设是其它格式将会出现例如以下异常: xml.parsers.expat.ExpatErr ...

  8. LT和ET模式

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

  9. Spring MVC之@RequestParam @RequestBody @RequestHeader 等详解<转>

    简介: handler method 参数绑定常用的注解,我们根据他们处理的Request的不同内容部分分为四类:(主要讲解常用类型) A.处理requet uri 部分(这里指uri templat ...

  10. PHP——连接数据库初

    <?php //1.生成连接 造连接对象 //$db=new mysqli($dbhost(服务器),$username,$userpass,$dbdatabase); $db = new my ...