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. min宏的学习

    1.先上实现代码: #define __min(t1, t2, min1, min2, x, y) ({ \ t1 min1 = (x); \ t2 min2 = (y); \ (void) (&am ...

  2. php AES加密解密的例子

    一共有两个文件:AES.php(aes算法类文件)和aesDemo.php(应用实例文件) aesDemo.php:例子, <?php require_once('./AES.php'); // ...

  3. UITableView__cell 距tableview顶端有间距

    UITableView__cell 距tableview顶端有间距     如何去掉这个间距呢?解决方法如下: //top 为cell距顶端的间距 (一般为负值) self.formTable.con ...

  4. 2、Reactive Extensions for .NET（译）

    实验3-引入 .net 中的 events 到 Rx 目标:前面实验中的使用各种工厂构造方法创建一个 可观察序列是一个部分.把 .net 中现有的异步数据源进行关联 是更重要的事情.在这次实验中我们将 ...

  5. html5 indexDB的使用

    angular.module('indexdb', []) .factory('indexDbJs', [function() { const CurDBVersion = 10000; window ...

  6. C语言 · c++_ch02_01（打印元音字母的ASCII码）

    算法提高 c++_ch02_01   时间限制:1.0s   内存限制:512.0MB      编写一个程序,利用强制类型转换打印元音字母大小写10种形式的ASCII码. 输出的顺序为:大写的字母A ...

  7. am335x 内核频率 ddr3频率 电压调整

    由Makefile可知,SPL的入口在u-boot-2011.09-psp04.06.00.08\arch\arm\cpu\armv7\start.S中 SPL的功能无非是设置MPU的Clock.PL ...

  8. [算法]滴滴笔试题——求最大子串和（O(n)复杂度）

    扫描法.一次扫描数组即可得出答案,复杂度O(n).这种方法用文字描述不容易说清楚,下面用每一步运算的图示来表达.伪代码如下: maxsofar=end=; ,n) end=max(end+x[i],) ...

  9. 使用导出导入(datapump)方式将普通表切换为分区表

    随着数据库数据量的不断增长,有些表须要由普通的堆表转换为分区表的模式. 有几种不同的方法来对此进行操作,诸如导出表数据,然后创建分区表再导入数据到分区表:使用EXCHANGE PARTITION方式来 ...

  10. LVM简介

    3. 创建VG.. 7 4. 创建LV.. 9 5.LV格式化及挂载... 10 一.LVM简介 LVM是 Logical Volume Manager(逻辑卷管理)的简写,它由Heinz Mauel ...