视频标签栏切换
原创
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频标签栏切换</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: #e1e1e1;
}
.contain {
position: relative;
top: 10px;
width: 100%;
height: 500px;
}
.box1 {
display: block;
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
}
.ul1 {
width: 100%;
height: 100%;
}
.box1-li {
background-size: 100% 100%;
width: 100%;
}
.box1-li a {
width: 100%;
height: 100%;
position: absolute;
}
.ul1 .current {
display: block;
height: 100%;
}
.box2 {
display: inline-block;
position: absolute;
top: 5px;
right: 10%;
width: 280px;
height: 490px;
background: rgba(0, 0, 0, 0.5);
}
.ul2 {
width: 100%;
margin-top: 30px;
}
.box2-li {
width: 258px;
height: 40px;
line-height: 15px;
display: flex;
align-items: center;
padding-left: 20px;
cursor: pointer;
}
.box2-li a {
width: 100%;
height: 100%;
}
.current span:nth-child(1) {
display: block;
color: #00ff00;
transition: all 0.2s ease;
font-size: 25px;
}
.current span:nth-child(2) {
display: block;
opacity: 0;
}
.current span:nth-child(3) {
display: block;
color: #00ff00;
}
.ul2 .current {
height: 60px;
}
</style>
</head>
<body>
<div class="contain">
<div class="box1">
<ul class="ul1">
<li class="box1-li current">
<a href="1.html"></a></li>
<li class="box1-li">
<a href="2.html"></a></li>
<li class="box1-li">
<a href="3.html"></a></li>
<li class="box1-li">
<a href=""></a></li>
<li class="box1-li">
<a href=""></a></li>
<li class="box1-li">
<a href=""></a></li>
<li class="box1-li">
<a href=""></a></li>
<li class="box1-li">
<a href=""></a></li>
<li class="box1-li">
<a href=""></a></li>
<li class="box1-li">
<a href=""></a></li>
<li class="box1-li">
<a href=""></a></li>
</ul>
</div>
<div class="box2">
<ul class="ul2">
<li class="box2-li current"><a href="1.html" target="_blank"><span>1</span> <span></span>
<span>背景1</span></a></li>
<li class="box2-li"><a href="2.html" target="_blank"><span>2</span><span></span>
<span>背景2</span></a>
</li>
<li class="box2-li"><a href="3.html" target="_blank"><span>3</span> <span></span>
<span>背景3</span></a></li>
<li class="box2-li"><a href="#"><span>4</span> <span></span> <span>背景4</span></a></li>
<li class="box2-li"><a href="#"><span>5</span> <span></span> <span>背景5</span></a></li>
<li class="box2-li"><a href="#"><span>6</span> <span></span> <span>背景6</span></a></li>
<li class="box2-li"><a href="#"><span>7</span> <span></span> <span>背景7</span></a></li>
<li class="box2-li"><a href="#"><span>8</span> <span></span> <span>背景8</span></a></li>
<li class="box2-li"><a href="#"><span>9</span> <span></span> <span>背景9</span></a></li>
<li class="box2-li"><a href="#"><span>10/span> <span></span> <span>背景10</span></a></li>
</ul>
</div>
</div>
<script>
var box1li = document.querySelectorAll('.box1-li');
for (var i = 1; i < box1li.length; i++) {
box1li[i - 1].style.backgroundImage = 'url(img/' + i + '.jpg)';
}
var box2li = document.querySelectorAll('.box2-li');
var ul1 = document.querySelector('.ul1');
var ul2 = document.querySelector('.ul2');
var span = [];
for (var x = 0; x < box2li.length; x++) {
span[x] = [];
for (var y = 0; y < box2li[x].querySelector('a').children.length; y++) {
span[x][y] = box2li[x].querySelector('a').querySelectorAll('span')[y];
}
}
var time = 0;
var timer = setInterval(timeout, 5000);
for (var i = 0; i < box2li.length; ++i) {
box2li[i].onmouseover = function () {
for (var i = 0; i < box2li.length; ++i) {
if (box2li[i] == this) {
time = i;
clearInterval(timer);
box1li[i].classList.add('current');
box2li[i].classList.add('current');
} else {
box1li[i].classList.remove('current');
box2li[i].classList.remove('current');
}
}
}
}
ul2.onmouseout = function () {
timer = setInterval(timeout, 5000);
}
function timeout() {
if (box1li[time].classList.contains('current')) {
box1li[time].classList.remove('current');
box2li[time].classList.remove('current');
time++;
time %= 10;
box1li[time].classList.add('current');
box2li[time].classList.add('current');
}
}
</script>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读