实验视频标签栏切换

最新推荐文章于 2021-06-11 16:24:01 发布

任由天高

最新推荐文章于 2021-06-11 16:24:01 发布

阅读量174

点赞数

分类专栏： H5+CSS3 JavaScript

本文链接：https://blog.csdn.net/fantasy_geek/article/details/105822077

版权

H5+CSS3 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述

代码：

<!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>八重樱</span> <span>：</span>
                        <span>桃园恋歌</span></a></li>
                <li class="box2-li"><a href="2.html" target="_blank"><span>一人之下3</span> <span>：</span>
                        <span>片头主题曲</span></a>
                </li>
                <li class="box2-li"><a href="3.html" target="_blank"><span>火影忍者</span> <span>：</span>
                        <span>博人传</span></a></li>
                <li class="box2-li"><a href="#"><span>命运石之门</span> <span>：</span> <span>斯坦因之门</span></a></li>
                <li class="box2-li"><a href="#"><span>命运石之门0</span> <span>：</span> <span>斯坦因之门0</span></a></li>
                <li class="box2-li"><a href="#"><span>刀剑神域</span> <span>：</span> <span>第一季</span></a>
                </li>
                <li class="box2-li"><a href="#"><span>刀剑神域</span> <span>：</span> <span>第二季</span></a></li>
                <li class="box2-li"><a href="#"><span>刀剑神域</span> <span>：</span> <span>第三季</span></a>
                </li>
                <li class="box2-li"><a href="#"><span>斗罗大陆</span> <span>：</span> <span>巅峰对决</span></a>
                </li>
                <li class="box2-li"><a href="#"><span>武庚纪</span> <span>：</span> <span>拼死一搏</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 + '.png)';
        }
        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>

任由天高

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实验视频标签栏切换

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>视频<...
复制链接

扫一扫