编程技术

Document

[HTML/CSS/JS]作品案例--笔记1

 一、头部导航栏代码

html代码

<!-- 第一部分 导航栏 登录 注册 卡片点击 切换   -->
    <div class="nav-containers">
        <ul class="ul-one">
            <li class="li-one color-white">
                首页
            </li>
            <li class="li-one">
                古诗练习
                <ul class="ul-two">
                    <li class="li-two">
                        <a href="./texstPaper.html">出古诗题</a>
                    </li>
                    <li class="li-two">
                        <a href="./exam.html">练习古诗</a>
                    </li>
                </ul>
            </li>
            <li class="li-one">
                诗歌
                <ul class="ul-two">
                    <li class="li-two">
                        <a href="./study.html">诗歌视频</a>
                    </li>
                    <li class="li-two">
                        <a href="./text2.html">诗歌</a>
                    </li>
                </ul>
            </li>
            <li class="li-one">
                教育
                <ul class="ul-two">
                    <li class="li-two">
                        <a href="./text.html">互动</a>
                    </li>

                </ul>
            </li>
            <li class="li-one">
                导航1
                <ul class="ul-two">
                    <li class="li-two">
                        导航2
                    </li>
                    <li class="li-two">
                        导航2
                    </li>
                    <li class="li-two">
                        导航2
                    </li>

                </ul>
            </li>
            <li class="li-one">
                导航1
                <ul class="ul-two">
                    <li class="li-two">
                        导航2
                    </li>
                    <li class="li-two">
                        导航2
                    </li>
                    <li class="li-two">
                        导航2
                    </li>

                </ul>
            </li>
            <li class="li-one">
                登录|注册
                <ul class="ul-two">
                    <li class="li-two">
                        <span onclick="showDialog('.login-containers',true), showDialog('.hot-x', false)">
                            登录
                        </span>
                    </li>
                    <li class="li-two">
                        <span onclick="showDialog('.logon-containers',true), showDialog('.hot-x', false)">
                            注册
                        </span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

js代码

 // 导航栏
        $('.li-one').hover(function () {
            //stop()立即停止动画
            $(this).children().stop().slideToggle();
        });

部分css代码

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
li{
    cursor: pointer;
}
a{
    text-decoration: none;
    color: #FFFFFF;
}
.color-white{
    color: #FFFFFF!important;
    background-color:rgba(0, 0, 0, 0.8);
}
/* 导航栏部分 */
.nav-containers{
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    background-color:rgba(0, 0, 0, 0.5);
    color: #FFFFFF80;
    font-family: 微软雅黑,'Heiti SC',黑体,Arial;
    z-index: 20;
}
.nav-containers ul{
    background-color:rgba(0, 0, 0, 0.6);
}
.nav-containers li{
    width: 180px;
    height: 60px;
    text-align: center;
    line-height: 60px;  
}
.nav-containers li:hover{
    background-color:rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
}
.ul-one{
    width: 1260px;
    display: flex;
    z-index: 10;
    
}
.ul-two{
    display: none;
}

二、自动轮播图

html代码

<!-- 第二部分 图片轮播器-->
    <div class="two_content">
        <div class="left_remove "></div>
        <div class="right_remove"></div>
        <div class="bigimages">
            <img src="https://img.dpm.org.cn/Uploads/Picture/2022/08/31/s630ec3a73e553.jpg" alt="" data="0">
            <img src="https://img.dpm.org.cn/Uploads/Picture/2022/09/28/s63340e337270c.jpg" alt="" data="1">
            <img src="https://img.dpm.org.cn/Uploads/Picture/2022/11/29/s63859d939961e.jpg" alt="" data="2">
            <img src="https://img.dpm.org.cn/Uploads/Picture/2022/11/29/s6385b09f3f21f.jpg" alt="" data="3">
        </div>
        <div class="bigimg_prompt">
            <div class="bigimg_prompt_img "></div>
            <div class="bigimg_prompt_img "></div>
            <div class="bigimg_prompt_img "></div>
            <div class="bigimg_prompt_img "></div>
        </div>
    </div>

js代码

//轮播图
        var timeIn = setInterval(carousel, 1000 * 4)
        var bigImgPromptImg = $('.bigimg_prompt_img ')
        var bigImages = $('.bigimages');
        var images = $('.bigimages img');
        var index = 0
        //轮播样式变化
        function styleBanner() {
            images.eq(index).show()
            images.eq(index).siblings().hide()
            bigImgPromptImg.eq(index).css("backgroundColor", "#FFFFFF");
            bigImgPromptImg.eq(index).siblings().css("backgroundColor", "rgba(0, 0, 0, 0.3)");
        }
        //自动轮播
        function carousel() {
            index++
            if (index > 3) {
                index = 0
            }
            styleBanner()

        }
        //鼠标悬浮停止轮播
        var twoContent = $('.two_content')
        var rightRemove = $('.right_remove')
        var leftRemove = $('.left_remove')
        twoContent.mouseover(function () {
            clearInterval(timeIn)
            rightRemove.css({
                right: "100px"
            })
            leftRemove.css({
                left: "100px"
            })
        })
        twoContent.mouseout(function () {
            timeIn = setInterval(carousel, 1000 * 3)
            rightRemove.css({
                right: "-60px"
            })
            leftRemove.css({
                left: "-60px"
            })
        });
        //点击底下长条实现切换
        bigImgPromptImg.click(function () {
            index = $(this).index();
            styleBanner()

        })
        //向右移
        rightRemove.click(function () {
            index++;
            if (index > 3) {
                index = 0
            }
            styleBanner()

        })
        //向左移
        leftRemove.click(function () {
            index--;
            if (index < 0) {
                index = 3
            }
            styleBanner()

        })

css代码

/* 轮播图部分 */
.two_content {
    width: 100%;
    height: 490px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

.bigimages {
    width: 10000px;
    height: 500px;
    z-index: 1;
    position: relative;

}

.bigimages img {
    width: 1536px;
    height: 482px;
}

.bigimages :nth-child(1) {
    z-index: 10;
}

.right_remove {
    width: 60px;
    height: 60px;
    background-image: url('./../images/right_tb.png');
    position: absolute;
    opacity: 0.5;
    right: -60px;
    top: 250px;
    z-index: 10;
    transition: 1s;
}

.right_remove:hover {
    opacity: 1;
}

.left_remove {
    width: 60px;
    height: 60px;
    background-image: url('./../images/left_tb.png');
    position: absolute;
    opacity: 0.5;
    left: -60px;
    top: 250px;
    z-index: 10;
    transition: 1s;

}

.left_remove:hover {
    opacity: 1;
}

.bigimg_prompt {
    width: 200px;
    height: 18px;
    position: absolute;
    bottom: 20px;
    left: 700px;
    display: flex;
    justify-content: space-around;
    z-index: 10;
}

.bigimg_prompt div {
    width: 45px;
    height: 5px;
    border-radius: 5px;
}

.bigimg_prompt div:nth-child(1) {

    background-color: #FFFFFF;
}

.bigimg_prompt div:nth-child(n+2) {
    background-color: rgba(0, 0, 0, 0.3);
}