<!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>