<!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. SpringData Jpa、Hibernate、Jpa 三者之间的关系

    JPA规范与ORM框架之间的关系是怎样的呢? JPA规范本质上就是一种ORM规范,注意不是ORM框架--因为JPA并未提供ORM实现,它只是制订了一些规范,提供了一些编程的API接口,但具体实现则由服 ...

  2. [转]C#操作word模板插入文字、图片及表格详细步骤

    c#操作word模板插入文字.图片及表格 1.建立word模板文件 person.dot用书签 标示相关字段的填充位置 2.建立web应用程序 加入Microsoft.Office.Interop.W ...

  3. java 九个预定义Class对象

    基本的 Java 类型(boolean.byte.char.short.int.long.float 和 double)和关键字 void通过class属性也表示为 Class 对象: Class类中 ...

  4. P1017 聪聪排数字

    题目描述 今天聪聪收到了n张卡片,他需要给他们从小到大排序. 输入格式 输入的第一行包含一个整数 \(n(1 \le n \le 10^3)\) . 输入的第二行包含 \(n\) 个正整数,以空格间隔 ...

  5. dotnet 使用 MessagePack 序列化对象

    和很多序列化库一样,可以通过 MessagePack 序列化和反序列化,和 json 相比这个库提供了二进制的序列化,序列化之后的内容长度比 json 小很多 这个库能序列的内容不多,大多数时候建议使 ...

  6. 搭建个人/企业私有云盘-seafile

    一.安装依赖组件 安装前的准备工作安装 Seafile 服务器之前,请确认已安装以下软件MariaDB 或者 MySQL 服务器 (MariaDB 是 MySQL 的分支),python 2.7 (从 ...

  7. 正基AP6212固件

    需要正基技术资料联系我   QQ507014762  电话17666215391 #AP6212_NVRAM_V1.0.1_20160606 2.4 GHz, 20 MHz BW modeThe fo ...

  8. Struts||IQ

    Here's question about struts2....... 1.struts2原理 初始的请求通过一条标准的过滤器链,到达 servlet 容器 ( 比如 tomcat 容器,WebSp ...

  9. __str__、__repr__和__format__

    obj.__ str __ ()是面向用户的,该方法将实例转换为一个字符 obj.__ repr __ ()面向程序员,该方法返回一个实例的代码表示形式,通常用来重新构造这个实例,repr()函数返回 ...

  10. 大白话讲解Spring的@bean注解

    1.Spring注解分类 从广义上Spring注解可以分为两类: 一类注解是用于注册Bean 假如IOC容器就是一间空屋子,首先这间空屋子啥都没有,我们要吃大餐,我们就要从外部搬运食材和餐具进来.这里 ...