一、头部导航栏代码
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);
}