<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{margin: 0;padding: 0}

        #wrap{width: 600px; margin:20px auto; font-size: 14px;border: 1px solid #ccc;}

        #tabs{width: 100%; height: 40px; line-height: 40px;border-bottom: 1px solid #ccc;}

        #tabs a{display: block;float: left; padding: 0 20px; text-decoration: none;}

        #tabs a.tabactive{background: brown; color: #fff;}

        #content{width: 100%; height: 400px;}

        #content p{height: 400px; display: none}

        #content p.conactive{display: block;}

    </style>

</head>

<body>

    <div id="wrap">

        <div id="tabs">

            <a class="tabactive" href="javascript:;">新闻</a>

            <a href="javascript:;">国内</a>

            <a href="javascript:;">国外</a>

        </div>

        <div id="content">

            <p class="conactive">新闻</p>

            <p>国内</p>

            <p>国外</p>

        </div>

    </div>

    <script>

        window.onload = function () {

            //保存this

            let that = null;

            //声明构造函数

            class Tabs {

                //构造器

                constructor(id){

                    this.wrap = document.getElementById(id);

                    this.abtns = this.wrap.getElementsByTagName('a');

                    this.pcon = this.wrap.getElementsByTagName('p');

                    this.num = 0;

                    this.timer = null;

                    this.init()

                }

                //初始化

                init(){

                    //保存this对象

                    that = this;

                    //执行自动播放功能

                    this.autoplay();

                    //执行点击切换功能

                    this.tab();

                    //鼠标移入时取消定时器

                    this.wrap.onmouseover = function(){

                        clearInterval(that.timer)

                    }

                    //鼠标离开时，开启自动轮播功能

                    this.wrap.onmouseleave = function(){

                        that.autoplay();

                    }

                }

                //点击切换

                tab(){

                    for(let i=0;i<this.abtns.length;i++){

                        this.abtns[i].index = i;

                        this.abtns[i].onclick = function(){

                            //注意：这个函数里的this指向了abtn元素，想要使用实例中的this就要用之前保存的that来代替

                            clearInterval(that.timer)

                            //把点击元素的index赋值给实例上的num，以保证下次自动轮播时起始点正确

                            that.num = this.index

                            that.qiehuan()

                        }

                    }

                }

                //自动播放

                autoplay(){

                    this.timer = setInterval(function(){

                        //注意：这个函数里的this指向了window，想要使用实例中的this就要用之前保存的that来代替

                        that.num++;

                        that.num %= that.abtns.length;

                        that.qiehuan()

                    },2000)

                }

                //切换效果

                qiehuan(){

                    for(let i=0;i<that.abtns.length;i++){

                        that.abtns[i].className = ""

                        that.pcon[i].className = ""

                    }

                    that.abtns[that.num].className = "tabactive"

                    that.pcon[that.num].className = "conactive"

                }

            }

            //生成实例

            new Tabs('wrap')

        }

    </script>

</body>

</html>

es6 面向对象选项卡（自动轮播功能）的更多相关文章

  1. 原生js面向对象编程-选项卡(自动轮播)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. Javascript专题（三）c.各种轮播--上下滚动轮播(面向对象版本)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  4. jQuery实现选项联动轮播

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jQuery仿淘宝图片无缝滚动轮播

    自己前天,也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery). 其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播,一直到现在也没有真正的写好,这次写得差不多了. 但是还有 ...

  6. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  7. js实现轮播功能

    先上图,效果大概就是这样子: 实现的功能: 1.鼠标经过第几个正方形,就要展示第几张图片,并且正方形的颜色也发生变化 2.图片自动轮播,(这需要一个定时器) 3.鼠标经过图片,图片停止自动播放(这需要 ...

  8. JS实现自动轮播图效果（js案例）

    现在很多网站都有轮播图,这篇文章主要为大家详细介绍了js实现轮播图的完整代码及原理,需要的小伙伴可以参考一下. 1.轮播图主要功能: 1.  图片自动轮播(主图切换同时下面导航图片也会跟着变化) 2. ...

  9. ES6面向对象 动态添加标签页

    HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

随机推荐

  1. [转]Netty实现原理浅析

    Netty是JBoss出品的高效的Java NIO开发框架,关于其使用,可参考我的另一篇文章netty使用初步.本文将主要分析Netty实现方面的东西,由于精力有限,本人并没有对其源码做了极细致的研 ...

  2. mysql聚合函数和分组

    文章实例的数据表,来自上一篇博客<mysql简单查询>:http://blog.csdn.net/zuiwuyuan/article/details/39349611 一. 聚合函数 聚合 ...

  3. HDU 2844 混合背包、

    题意:一个人想买手表,给你n个价值的硬币,然后给你n个价值硬币对应的个数.但是呢,这个人只知道这个手表的价格不超过m元.问他最多能买多少种价值的手表 思路:dp背包专题 但是- - 一直不知道该怎么d ...

  4. [转载] CentOS系统开机自动挂载光驱 和 fstab文件详解

    参考 http://blog.itpub.net/12272958/viewspace-676977/ 一.开机自动挂载光驱 1.按习惯,root用户,在/media目录下建立目录cdrom——mkd ...

  5. There is no PasswordEncoder mapped for the id "null"的解决办法

    今日在SpringBoot项目中使用 Spring Security ,登录时发现报500错,报错信息如下: There is no PasswordEncoder mapped for the id ...

  6. H3C VLAN基本配置

  7. ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理（8）之文章管理

    到这一步,我们整个项目的核心搭建已经算是完成了,接下来就是我们业务功能的实际应用,也就是表现层的设计和实现,如果你是一个项目负责人,到这一步,接下来的工作就可以交给下面的兄弟去完成了,在这里我们用文章 ...

  8. 2019-6-23-win10-uwp-应用放到桌面

    title author date CreateTime categories win10 uwp 应用放到桌面 lindexi 2019-06-23 11:11:30 +0800 2019-06-2 ...

  9. vscode 添加golang插件

    安装好git 下列命令中的路径一定要按照自己实际的路径来 mkdir -p $GOPATH/src/golang.org/x  //路径下创建此文件cd $GOPATH/src/golang.org/ ...

  10. elasticsearch基础知识杂记

    日常工作中用到的ES相关基础知识和总结.不足之处请指正,会持续更新. 1.集群的健康状况为 yellow 则表示全部主分片都正常运行(集群可以正常服务所有请求),但是 副本 分片没有全部处在正常状态. ...