<!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. C# 总结复习---知识点

    知识点: 1. 转义字符: Console.WriteLine("C:\\asdfg\\sdfd");   ----    "\\"是转义斜杠后面紧跟着的字符C ...

  2. java Jre和Jdk的区别?

    JRE:(Java Runtime Environment),java运行环境.包括Java虚拟机(JVM Java Virtual Machine)和Java程序所需的核心类库等,如果想要运行一个开 ...

  3. Python--day48--ORM框架SQLAlchemy操作表

    ORM框架SQLAlchemy操作表: 表结构和数据库连接: #!/usr/bin/env python # -*- coding:utf-8 -*- from sqlalchemy.ext.decl ...

  4. python基础九之函数

    1,函数的定义 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数分为自定义函数和内置函数,内置函数就是python内部自带的一些函数,如:print().int()等.自定义函数 ...

  5. windows命令行下redis读取中文字符乱码

    我在eclipse上对redis进行了一个操作,添加了一个中文字符串进去,可以看到是添加成功了的 但是在命令行中读取的时候却成了乱码,如下图所示 这是因为windows命令行的编码是gbk 可以通过如 ...

  6. mpvue的坑，持续更新-.-

    mpvue... 坑 怎么说呢,去github看一下,发现还是有很多问题没有解决... 不支持filter 亲,到现在还没有支持filter哦.只能用替代方法了,用computed或者渲染前先处理数据 ...

  7. UVa 12325 - Zombie's Treasure Chest－[分类枚举]

    12325 Zombie’s Treasure Chest Some brave warriors come to a lost village. They are very lucky and fi ...

  8. P1055 连通块问题

    题目描述 给出一个n行m列的地图,'.'代表陆地,'W'代表水.现在需要你计算地图中有多少个水块.八个方向可以连通 比如:4*6的地图 ...WWW ...WW. WW.... .....W 中有3个 ...

  9. H3C DHCP中继配置示例

  10. SVG基础绘图实例

    SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准. 下面整 ...