JavaScript -- 总结 13（小白）

柿子来了

于 2024-08-12 09:00:00 发布

阅读量297

点赞数 9

文章标签： javascript 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/140889243

版权

tab切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            width: 500px;
            height: 30px;
            margin: 30px auto 0;
            position: relative;
        }

        li {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
            line-height: 30px;
            box-sizing: border-box;
            float: left;
        }

        .content {
            width: 500px;
            height: 302px;
            border: 1px solid #000;
            margin: 0 auto;

            position: relative;
        }

        .content .tab {
            width: 100%;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;

            display: none;
        }

        .content .active {
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <div class="content">
        <div class="tab active">1</div>
        <div class="tab">2</div>
        <div class="tab">3</div>
        <div class="tab">4</div>
        <div class="tab">5</div>
    </div>

    <script>
        // 点击li，展示对应的 tab 内容
        // 获取元素
        var list = document.getElementsByTagName("li");
        var tabs = document.getElementsByClassName("tab");

        for (var i = 0; i < list.length; i++) {
            // 保留 i 值
            list[i].index = i;

            list[i].onclick = function () {
                siblingFun();
                tabs[this.index].className = "tab active";
            }
        }

        // 排他函数
        function siblingFun() {
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].className = "tab";
            }
        }
    </script>
</body>

</html>

swiper使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引入 swiper 的css -->
    <!-- <link rel="stylesheet" href="./swiper/swiper-bundle.min.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">

    <style>
        .swiper {
            width: 600px;
            height: 300px;

            /* 按钮的样式 */
            --swiper-navigation-color: red;
        }

        .swiper-slide {
            width: 600px;
            height: 300px;
            text-align: center;
            line-height: 300px;
        }

        .my-bullet {
            float: left;
            width: 30px;
            height: 30px;
            background-color: pink;
        }

        .my-bullet-active {
            background-color: red;
        }
    </style>
</head>

<body>

    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>

        <!-- 分页器 -->
        <div class="swiper-pagination"></div>

        <div class="swiper-button-prev swiper-btn-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
    </div>

    <!-- 引入 swiper 的js -->
    <!-- <script src="./swiper/swiper-bundle.min.js"></script> -->
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

    <script>
        //                          容器名字
        var mySwiper = new Swiper('.swiper', {
            // 自动切换
            autoplay: {
                delay: 3000,
            },
            direction: 'horizontal', // 水平切换选项
            loop: true, // 循环模式选项

            // 分页器属性
            pagination: {
                // 分页器名字
                el: '.swiper-pagination',
                clickable: true,

                // 规定分页器名字 （舍弃了之前的类名，连同样式）
                bulletClass: 'my-bullet',
                bulletActiveClass: 'my-bullet-active',
            },

            // 前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

        })        
    </script>
</body>

</html>

swiper效果图

字体图标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /* 1.Unicode */
        @font-face {
            font-family: 'iconfont';

            /* 1.改路径 */
            /* t=1722411847850 */
            src: url('./fonts/iconfont.ttf?t=1722411847850') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 30px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .iconfont{
            color: red;
        }
    </style>
</head>

<body>

    <!-- 2.改编码 -->
    <span class="iconfont">&#xe63f;</span>
</body>

</html>