需求说明:请使用“构造函数+原型”的方法制作简易选项卡。 1、选项卡可以自动播放 2、鼠标滑过哪个选项就播放对应选项的内容 3、鼠标离开后,继续按顺序播放 4、注意:播放或滑过哪个选项卡,哪个选项卡的背景颜色变为蓝色
时间: 2023-06-01 07:03:17 浏览: 106
HTML代码:
```
<div id="tab">
<ul>
<li class="active">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="content active">选项卡1的内容</div>
<div class="content">选项卡2的内容</div>
<div class="content">选项卡3的内容</div>
</div>
```
CSS代码:
```
#tab ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
#tab ul li {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #ccc;
margin-right: 10px;
cursor: pointer;
}
#tab ul li.active {
background-color: #00f;
color: #fff;
}
#tab .content {
display: none;
padding: 10px;
}
#tab .content.active {
display: block;
}
```
JavaScript代码:
```
function Tab(options) {
this.wrap = options.wrap;
this.tabTitles = options.tabTitles;
this.tabContents = options.tabContents;
this.interval = options.interval || 3000;
this.init();
}
Tab.prototype = {
constructor: Tab,
init: function() {
this.render();
this.bindEvent();
this.autoPlay();
},
render: function() {
var wrap = document.querySelector(this.wrap);
var tabTitles = this.tabTitles;
var tabContents = this.tabContents;
var html = '';
html += '<ul>';
for (var i = 0; i < tabTitles.length; i++) {
html += '<li';
if (i === 0) {
html += ' class="active"';
}
html += '>' + tabTitles[i] + '</li>';
}
html += '</ul>';
for (var i = 0; i < tabContents.length; i++) {
html += '<div class="content';
if (i === 0) {
html += ' active';
}
html += '">' + tabContents[i] + '</div>';
}
wrap.innerHTML = html;
},
bindEvent: function() {
var self = this;
var tabs = document.querySelectorAll(this.wrap + ' ul li');
for (var i = 0; i < tabs.length; i++) {
tabs[i].index = i;
tabs[i].onmouseover = function() {
self.stopPlay();
self.changeTab(this.index);
};
tabs[i].onmouseout = function() {
self.autoPlay();
};
}
},
autoPlay: function() {
var self = this;
this.timer = setInterval(function() {
var activeIndex = self.getActiveIndex();
var nextIndex = activeIndex + 1;
if (nextIndex >= self.tabTitles.length) {
nextIndex = 0;
}
self.changeTab(nextIndex);
}, this.interval);
},
stopPlay: function() {
clearInterval(this.timer);
},
changeTab: function(index) {
var tabs = document.querySelectorAll(this.wrap + ' ul li');
var contents = document.querySelectorAll(this.wrap + ' .content');
for (var i = 0; i < tabs.length; i++) {
if (i === index) {
tabs[i].className = 'active';
contents[i].className = 'content active';
} else {
tabs[i].className = '';
contents[i].className = 'content';
}
}
},
getActiveIndex: function() {
var tabs = document.querySelectorAll(this.wrap + ' ul li');
for (var i = 0; i < tabs.length; i++) {
if (tabs[i].className === 'active') {
return i;
}
}
}
};
// 使用方法
var tab = new Tab({
wrap: '#tab',
tabTitles: ['选项卡1', '选项卡2', '选项卡3'],
tabContents: ['选项卡1的内容', '选项卡2的内容', '选项卡3的内容'],
interval: 3000
});
```