<!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. 原生js实现选字游戏

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

  2. dotnet core 添加 SublimeText 编译插件

    因为 SublimeText 有很多插件都是使用 Py 写的,而我想使用 dotnet core 给 SublimeText 写一个编译插件,也就是在我使用 Markdown 的时候可以点击编译,将 ...

  3. 51nod1370 排列与操作

    性质:最终值域相同的一定是连续一段 花费最小?一定是值域个数个!并且当最后为i的数恰好只有i一个位置的时候,肯定选择不动,少花费一个 所以,我们考虑:每个最终方案在花费最小的方案下恰好被统计一次! 而 ...

  4. P1069 约瑟夫问题

    题目描述 约瑟夫问题是一个非常经典的问题. n个人(n<=100)围成一圈,从第一个人开始报数,数到m的人出列,再由下一个人重新从1开始报数,数到m的人再出圈,--依次类推,直到所有的人都出圈, ...

  5. SpringBoot2.X 项目使用外置绝对路径的配置文件

    spring-boot-absolute-config 前言 该工程是为解决应用部署应用时指定配置文件存放位置的问题. SpringBoot项目默认加载以下位置的配置文件: ? 1 2 3 4 cla ...

  6. 2019-8-31-git-通过-SublimeMerge-处理冲突

    title author date CreateTime categories git 通过 SublimeMerge 处理冲突 lindexi 2019-08-31 16:55:59 +0800 2 ...

  7. Loj2604开车旅行

    Loj2604开车旅行 我完全没有看出这道题哪里是DP 首先,一个位置向后的最近和第二近我们可以通过set去简单实现 通过维护最大和次大即可 至于高度相同的情况我们可以通过先在set中查询小的来实现 ...

  8. C# 通过编程的方法在桌面创建回收站快捷方式

    基本所有的桌面都会存在回收站快捷方式,如果想要多创建几个快捷方式,点开就是回收站,请看本文的方法 在引用 Windows Script Host Object Model 这个 COM 方法之后可以使 ...

  9. dotnet 获取用户设备安装了哪些 .NET Framework 框架

    从注册表可以拿到当前用户安装的 .NET Framework 版本,本文告诉大家如何解析这些信息 在注册表的当前设备的 SOFTWARE\Microsoft\NET Framework Setup\N ...

  10. codeforces 1217E E. Sum Queries? （线段树

    codeforces 1217E E. Sum Queries? (线段树 传送门:https://codeforces.com/contest/1217/problem/E 题意: n个数,m次询问 ...