一、头部导航栏代码

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);
}