期末的前端开发大作业仿照着BiliBili和参考大佬的开源项目制作了这个网站 虽然很low
仿BiliBili前端网页制作
图片展示
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/fa_icon/all.min.css">
</head>
<body>
<!-- banner部分 -->
<div class="">
<div class="vidContainer">
<video
class="vid"
loop
autoplay="autoplay"
muted="muted"
src="img/banner/headbanner.webm"
></video>
</div>
<div class="navContainer">
<div class="first-nav">
<ul class="f-n">
<li>主站</li>
<li>番剧</li>
<li>游戏中心</li>
<li>直播</li>
<li>会员购</li>
<li>漫画</li>
<li>赛事</li>
<li>高考季</li>
<li style="font-size: 16px">下载App</li>
</ul>
</div>
<div class="searchInput">
<input type="text" placeholder="亚比囧囧囧~" />
<div class="searchBtn">
<a class="fa fa-search" href=""></a>
</div>
</div>
<div class="userSection">
<div class="user-left">
<div class="touxaing">
<img
src="./img/touxiang.jpg"
width="36px"
height="36px"
alt=""
/>
</div>
<a href="">大会员</a>
<a href="">消息</a>
<a href="">动态</a>
<a href="">大会员</a>
<a href="">历史</a>
<a href="">创作中心</a>
</div>
<div class="user-right">
<div class="userDetail">
<a href="javascript:;" style="color: white">投稿</a>
</div>
</div>
</div>
</div>
<div class="biliLogo">
<img src="./img/logo.png" width="168px" alt="">
<span>戳我试试</span>
</div>
</div>
<!-- 第一部分 -->
<div class="first-section">
<div class="f-1">
<div class="l-1">
<ul class="l-ul">
<li>
<a>
<div class="fa fa-home circle" style="background-color: #ff5c7c"></div>
<p>首页</p>
</a>
</li>
<li>
<a>
<div class="fa fa-home circle" style="background-color: #ff5c7c"></div>
<p>动态</p>
</a>
</li>
<li>
<a>
<div class="fa fa-fire-alt circle" style="background-color: #ff716d"></div>
<p>热门</p>
</a>
</li>
<li>
<a>
<div class="fa fa-radiation-alt circle" style="background-color: #6dc781"></div>
<p>频道</p>
</a>
</li>
</ul>
</div>
<span class="line"></span>
<div class="l-2">
<a href="">
<span>动画<em>999+</em></span>
</a>
<a href="">
<span>音乐<em>999+</em></span>
</a>
<a href="">
<span>舞蹈<em>999+</em></span>
</a>
<a href="">
<span>知识<em>999+</em></span>
</a>
<a href="">
<span>生活<em>999+</em></span>
</a>
<a href="">
<span>时尚<em>999+</em></span>
</a>
<a href="">
<span>娱乐<em>999+</em></span>
</a>
<a>
<span>放映厅<em>999+</em></span>
</a>
<a href="">
<span>番剧<em>999+</em></span>
</a>
<a href="">
<span>国创<em>999+</em></span>
</a>
<a href="">
<span>游戏<em>999+</em></span>
</a>
<a href="">
<span>科技<em>999+</em></span>
</a>
<a href="">
<span>鬼畜<em>999+</em></span>
</a>
<a href="">
<span>资讯<em>999+</em></span>
</a>
<a href="">
<span>影视<em>999+</em></span>
</a>
<a href="">
<span>更多<i class="fa fa-angle-down" style="font-size: 16px"></i></span>
</a>
</div>
<span class="line"></span>
<div class="l-3">
<ul class="l-3Nav">
<li>
<a href="">
<em class="fab fa-buffer"></em> 专栏
</a>
</li>
<li>
<a href="">
<em class="fa fa-flag"></em> 活动
</a>
</li>
<li>
<a href="">
<em class="fa fa-boxes"></em> 小黑屋
</a>
</li>
<li>
<a href="">
<em class="fa fa-camera"></em> 直播
</a>
</li>
<li>
<a href="">
<em class="fab fa-hire-a-helper"></em> 课堂
</a>
</li>
<li>
<a href="">
<em class="fa fa-music"></em> 音乐PLUS
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 第二部分 -->
<div class="second-section">
<!-- 轮播部分 -->
<div class="autoShow">
<div class="autoshow-wrapper">
<a class="lubo" href="">
<img src="img/lunbo/lunbo1.avif" />
</a>
<a class="lubo" href="">
<img src="./img/lunbo/lunbo2.avif" />
</a>
<a class="lubo" href="">
<img src="./img/lunbo/lunbo3.avif" />
</a>
<a class="lubo" href="">
<img src="img/lunbo/lunbo4.avif" />
</a>
<a class="lubo" href="">
<img src="./img/lunbo/lunbo5.avif" />
</a>
</div>
<div class="eat">
</div>
<button class="prev">❮</button>
<button class="next">❯</button>
</div>
<div class="tuijian">
<div class="t-1">
<img src="./img/tuijian/tuijian1.avif" />
<div class="imgContent">
<h2>☕️优雅永不过时~♪☕️</h2>
<div class="up-Wrapper">
<span class="up">UP</span>CJY_e
<p class="uppig">56.3w播放</p>
</div>
</div>
</div>
<div class="t-1">
<img src="./img/tuijian/tuijian2.avif" />
<div class="imgContent">
<h2>我的窝囊人生</h2>
<div class="up-Wrapper">
<span class="up">UP</span>胡翠翠
<p class="uppig">122.7W播放</p>
</div>
</div>
</div>
<div class="t-1">
<img src="./img/tuijian/tuijian3.avif" />
<div class="imgContent">
<h2>可以点一下封面吗</h2>
<div class="up-Wrapper">
<span class="up">UP</span>CJY_e
<p class="uppig">63.8W播放</p>
</div>
</div>
</div>
<div class="t-1">
<img src="./img/tuijian/tuijian4.avif" />
<div class="imgContent">
<h2>我爱你</h2>
<div class="up-Wrapper">
<span class="up">UP</span>aboyzy
<p class="uppig">94.6W播放</p>
</div>
</div>
</div>
<div class="t-1">
<img src="./img/tuijian/tuijian5.avif" />
<div class="imgContent">
<h2>vlog挪威之旅</h2>
<div class="up-Wrapper">
<span class="up">UP</span>aboyzy
<p class="uppig">94.6W播放</p>
</div>
</div>
</div>
<div class="t-1">
<img src="./img/tuijian/tuijian6.avif" />
<div class="imgContent">
<h2>祝你平安</h2>
<div class="up-Wrapper">
<span class="up">UP</span>aboyzy
<p class="uppig">1314W播放</p>
</div>
</div>
</div>
</div>
</div>
<!--推广部分-->
<div class="first-report-section">
<div class="f-left-wrapper">
<div class="f-left-header">
<div class="fa fa-paper-plane"></div>
<div style="font-size: 20px; margin-right: 20px">推广</div>
<div style="font-size: 12px; color: #505050; line-height: 24.8px">
<span class="fa fa-fire" style="color: #f0361b; font-size: 15px; margin-right: 5px"></span>
萌系星探官招募中
</div>
</div>
<div class="f-left-content">
<div>
<a href="https://www.bilibili.com/bangumi/play/ss43622">
<img src="./img/guang/jdgjj.avif" alt="" />
<p>间谍过家家</p>
</a>
<span class="up" style="color: #99a6c4; margin-top: 15px">番剧</span>日常、搞笑
</div>
<div>
<a href="https://www.bilibili.com/bangumi/play/ss2688">
<img src="./img/guang/ms5lm.avif" alt="" />
<p>秒速五厘米</p>
</a>
<span class="up" style="color: #99a6c4; margin-top: 15px">电影</span> 催泪、日常
</div>
<div>
<a href="https://www.bilibili.com/bangumi/play/ss40028">
<img src="./img/guang/zll.avif" alt="" />
<p>紫罗兰永恒花园</p>
</a>
<span class="up" style="color: #99a6c4; margin-top: 15px">电影</span> 奇幻、爱情
</div>
<div>
<a href="https://www.bilibili.com/bangumi/play/ss12548l">
<img src="./img/guang/rzdf.avif" alt="" />
<p>让子弹飞</p>
</a>
<span class="up" style="color: #99a6c4; margin-top: 15px">电影</span> 励志
</div>
<div>
<a href="">
<img src="" alt="" />
<p></p>
</a>
<span class="up" style="color: #99a6c4; margin-top: 15px"></span>
</div>
</div>
</div>
<div class="f-right-wrapper">
<div class="f-right-header">
<h2>观看列表</h2>
</div>
<div class="f-right-content">
<img src="./img/guang/fenli.avif" style="width: 320px" />
</div>
</div>
</div>
<!--分割-->
<div class="reportTitle">
<img src="./img/fenge.jpg" alt="" srcset="">
</div>
</body>
<script src="./js/index.js"></script>
<script src="./js/banner.js"></script>
</html>
CSS
使用了外部的图标库FA5 这里未进行展示
/* 移除所有元素的默认外边距和内边距 */
* {
margin: 0; /* 移除所有元素的外边距 */
padding: 0; /* 移除所有元素的内边距 */
}
/* 顶部整体 */
.vidContainer {
width: 100%; /* 设置视频容器的宽度为父元素的 100% */
display: flex; /* 使用 flexbox 布局 */
justify-content: center; /* 将子元素水平居中对齐 即 视频水平对齐 */
overflow: hidden; /* 隐藏超出容器的内容 */
}
/* 设置视频的样式 */
.vid {
position: relative; /* 使用相对定位，使其相对于正常位置进行定位 */
width: 110%; /* 设置视频的宽度为容器的 110%，确保视频覆盖整个容器 */
height: 100%; /* 设置视频的高度为容器的 100% */
}
/* 定义顶部导航栏的容器 */
.navContainer {
/* 绝对定位，使导航栏相对于父元素定位 */
position: absolute;
/* 使用 flexbox 布局，将子元素水平排列 */
display: flex;
/* 子元素之间的空间均匀分布，两端留空 */
justify-content: space-between;
/* 子元素垂直居中对齐 */
align-items: center;
/* 设置导航栏宽度为父容器的 100% */
width: 100%;
/* 设置导航栏的固定高度 */
height: 56px;
/*设置高度为离顶部*/
top: 10px;
}
/* 定义导航菜单的容器 */
.first-nav {
/* 使用 flexbox 布局，将导航菜单项水平排列 */
display: flex;
/* 设置导航菜单的高度 */
height: 36px;
/* 设置导航菜单的最小宽度 */
min-width: 452px;
/* 设置导航菜单距离左侧的边距 */
margin-left: 20px;
}
/* 定义导航菜单项的样式 */
.f-n {
/* 使用 flexbox 布局，将导航菜单项水平排列 */
display: flex;
/* 子元素垂直居中对齐 */
align-items: center;
/* 设置字体大小 */
font-size: 14px;
/* 设置字体颜色为白色 */
color: #fff;
/* 为文字添加阴影效果 */
text-shadow: 0 1px 1px rgb(0 0 0 / 30%);
}
/* 定义单个导航菜单项的样式 */
.f-n li {
/* 设置右侧的外边距 */
margin-right: 12px;
/* 设置鼠标悬停时显示为指针 */
cursor: pointer;
/* 设置文本居中对齐 */
text-align: center;
/* 移除左侧的圆点 */
list-style: none;
}
/* 定义搜索框的容器 */
.searchInput {
/* 使用 flexbox 布局，将输入框和按钮水平排列 */
display: flex;
/* 使用相对定位，使搜索框相对于其正常位置进行调整 */
position: relative;
/* 调整搜索框距离左侧的位置 */
left: -20px;
/* 设置搜索框的宽度 */
width: 500px;
/* 设置搜索框的高度 */
height: 36px;
}
/* 定义输入框的样式 */
.searchInput input {
/* 设置输入框的高度 */
height: 100%;
/* 设置输入框的宽度占搜索框的 85.99% */
width: 85.99%;
/* 移除输入框的轮廓 */
outline: none;
/* 设置输入框内边距 */
padding: 0 38px 0 16px;
/* 移除输入框的边框 */
border: 1px solid hsla(0, 0%, 100%, 0);
/* 设置输入框左上角和右上角的圆角 */
border-radius: 4px 0 0 4px;
/* 设置输入框的背景颜色为白色 */
background-color: #fff;
}
/* 定义搜索按钮的样式 */
.searchBtn {
/* 设置按钮的宽度占搜索框的 14.11% */
width: 14.11%;
/* 设置按钮的高度 */
height: 100%;
/* 设置按钮右上角和右下角的圆角 */
border-radius: 0 4px 4px 0;
/* 设置按钮的背景颜色 */
background: #e7e7e7;
/* 移除按钮的边框 */
border: 1px solid hsla(0, 0%, 100%, 0);
/* 设置鼠标悬停时显示为指针 */
cursor: pointer;
/* 设置按钮文本居中对齐 */
text-align: center;
}
/* 定义搜索按钮链接的样式 */
.searchBtn a {
/* 设置字体颜色 */
color: #505050;
/* 设置行高与按钮高度一致 */
line-height: 36px;
/* 设置文本居中对齐 */
text-align: center;
/* 设置所有属性的线性过渡效果 */
transition: all linear 0.2s;
/* 移除下划线 */
text-decoration: none;
}
/* 定义搜索按钮悬停时的样式 */
.searchBtn a:hover {
/* 设置悬停时字体颜色 */
color: #00a1d6;
}
/* 定义用户部分的容器 */
.userSection {
/* 使用 flexbox 布局，将用户信息部分水平排列 */
display: flex;
/* 设置右侧的外边距 */
margin-right: 20px;
/* 设置用户部分的高度 */
height: 36px;
}
/* 定义用户部分左侧的样式 */
.user-left {
/* 使用 flexbox 布局，将用户信息项水平排列 */
display: flex;
/* 子元素垂直居中对齐 */
align-items: center;
/* 设置用户部分左侧宽度占 80% */
width: 80%;
/* 设置用户部分的高度 */
height: 100%;
}
/* 定义用户部分左侧链接的样式 */
.user-left a {
/* 设置字体大小 */
font-size: 14px;
/* 设置字体颜色 */
color: #fff;
/* 为文字添加阴影效果 */
text-shadow: 0 1px 1px rgb(0 0 0 / 30%);
/* 防止文本换行 */
white-space: nowrap;
/* 设置左侧的外边距 */
margin-left: 12px;
/* 移除下划线 */
text-decoration: none;
}
.touxaing {
width: 36px; /* 设置元素的宽度 */
height: 36px; /* 设置元素的高度 */
border-radius: 50%; /* 将元素设置为圆形 */
overflow: hidden; /* 确保内容不溢出边界 */
margin-right: 10px; /* 设置右侧外边距 */
cursor: pointer; /* 鼠标悬停时显示为指针 */
display: flex; /* 使用 flex 布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
background-color: #fff; /* 设置背景颜色 */
}
/* 定义用户部分右侧的样式 */
.user-right {
/* 使用 flexbox 布局 */
display: flex;
/* 移除下划线 */
}
.user-right a {
text-decoration: none;
}
/* 定义用户详情按钮的样式 */
.userDetail {
/* 设置用户详情按钮的宽度 */
width: 100px !important;
/* 设置用户详情按钮的高度 */
height: 100%;
/* 设置背景颜色 */
background-color: #fb7299;
/* 设置圆角 */
border-radius: 2px;
/* 设置文本居中对齐 */
text-align: center;
/* 设置行高与按钮高度一致 */
line-height: 36px;
/* 设置左侧的外边距 */
margin-left: 20px;
}
.biliLogo {
position: absolute;
cursor: pointer;
top: 56px; /* 距离顶部56像素 */
left: 154.66px; /* 距离浏览器左侧154.66像素 */
}
.biliLogo span {
position: absolute;
width: 80px;
height: 40px;
line-height: 40px;
top: 10px;
text-align: center;
color: #fff;
background: url('../img/logoy.png') no-repeat center center;
background-size: 100%;
animation: floatmove 2s infinite;
transition: all 0.3s;
}
/* 第一部分容器样式 */
.first-section {
display: flex; /* 使用flex布局 */
width: 1198px; /* 宽度为1630px */
min-width: 999px; /* 最小宽度为999px */
height: 108px; /* 高度为108px */
margin: 0 auto; /* 水平居中 */
}
/* 第一部分内容容器样式 */
.f-1 {
display: flex; /* 使用flex布局 */
width: 100%; /* 宽度为100% */
height: 100%; /* 高度为100% */
align-items: center; /* 垂直居中 */
}
/* 第一导航栏容器样式 */
.l-1 {
display: flex; /* 使用flex布局 */
height: 68px; /* 高度为68px */
}
/* 第一导航栏列表样式 */
.l-ul {
display: flex; /* 使用flex布局 */
width: 100%; /* 宽度为100% */
text-align: center; /* 文本居中对齐 */
justify-content: space-between; /* 子元素均匀分布 */
}
/* 第一导航栏列表项样式 */
.l-ul li {
width: 66px; /* 宽度为66px */
transition: all 0.3s; /* 添加过渡效果 */
cursor: pointer; /* 鼠标悬停时显示指针 */
font-size: 14px; /* 字体大小为14px */
/* 移除左侧的圆点 */
list-style: none;
width: 50px;
}
/* 第一导航栏列表项文本样式 */
.l-ul li p {
transition: color linear 0.2s; /* 文本颜色过渡效果 */
}
/* 第一导航栏列表项悬停样式 */
.l-ul li:hover {
color: #17a9da; /* 悬停时文本颜色 */
}
/* 第一导航栏列表项链接样式 */
.l-ul li a {
display: block; /* 显示为块级元素 */
height: 54px;
}
.l-ul li a div{
line-height: 36px;
}
/* 导航图标样式 */
.fa-home,
.fa-radiation-alt,
.fa-fire-alt {
font-size: 20px; /* 字体大小为20px */
color: white; /* 颜色为白色 */
}
/* 圆形图标容器样式 */
.circle {
width: 36px; /* 宽度为36px */
height: 36px;
line-height: 36px;
text-align: center; /* 文本居中对齐 */
border-radius: 50%; /* 圆角半径为50% */
margin: 0 auto 4px; /* 居中对齐并在底部添加4px的外边距 */
}
/* 第二导航栏容器样式 */
.l-2 {
position: relative; /* 相对定位 */
display: flex; /* 使用flex布局 */
height: 68px; /* 高度为68px */
top: -5px; /* 顶部偏移 -5px */
flex-wrap: wrap; /* 子元素换行 */
flex-direction: column; /* 子元素垂直排列 */
flex: 1; /* 占据剩余空间 */
box-sizing: border-box; /* 包括内边距和边框在内计算宽度和高度 */
}
/* 第二导航栏链接样式 */
.l-2 a {
color: #000; /* 颜色为黑色 */
height: 34px; /* 高度为34px */
display: flex; /* 使用flex布局 */
box-sizing: border-box; /* 包括内边距和边框在内计算宽度和高度 */
transition: color linear 0.2s; /* 颜色过渡效果 */
text-decoration: none;
}
/* 第二导航栏链接悬停样式 */
.l-2 a:hover {
color: #17a9da; /* 悬停时颜色 */
}
/* 第二导航栏文本容器样式 */
.l-2 span {
display: flex; /* 使用flex布局 */
/*align-items: center; !* 垂直居中 *!*/
font-size: 14px; /* 字体大小为14px */
line-height: 34px; /* 行高为34px */
}
/* 第二导航栏数量样式 */
.l-2 em {
font-size: 12px; /* 字体大小为12px */
width: 32px; /* 宽度为32px */
line-height: 15px; /* 行高为15px */
height: 15px; /* 高度为15px */
display: inline-block; /* 显示为行内块级元素 */
background-color: skyblue; /* 背景颜色为天蓝色 */
border-radius: 2px; /* 圆角半径为2px */
color: #fff; /* 颜色为白色 */
transform: scale(0.85); /* 缩放比例为0.85 */
}
/* 第三导航栏容器样式 */
.l-3 {
display: flex; /* 使用flex布局 */
flex-direction: column; /* 子元素垂直排列 */
width: 220px; /* 宽度为289px */
height: 68px; /* 高度为68px */
}
/* 第三导航栏列表样式 */
.l-3Nav {
display: flex; /* 使用flex布局 */
width: 100%; /* 宽度为100% */
height: 68px; /* 高度为68px */
flex-direction: column; /* 子元素垂直排列 */
font-size: 14px; /* 字体大小为14px */
flex-wrap: wrap; /* 子元素换行 */
}
/* 第三导航栏列表项样式 */
.l-3Nav li {
margin-right: 10px; /* 右外边距为10px */
transition: all 0.5s; /* 添加过渡效果 */
/* 移除左侧的圆点 */
list-style: none;
}
/* 第三导航栏列表项悬停样式 */
.l-3Nav li:hover a {
color: #17a9da; /* 悬停时颜色 */
}
/* 第三导航栏链接样式 */
.l-3Nav a {
line-height: 34px; /* 行高为34px */
color: black; /* 颜色为黑色 */
transition: color linear 0.2s; /* 颜色过渡效果 */
text-decoration: none;
}
/* 图标样式 */
.fa-buffer {
color: skyblue; /* 颜色为天蓝色 */
font-size: 20px; /* 字体大小为20px */
}
.fa-flag {
color: #f39800; /* 颜色为橙色 */
font-size: 18px; /* 字体大小为18px */
}
.fa-boxes {
color: #f39800; /* 颜色为橙色 */
font-size: 18px; /* 字体大小为18px */
}
.fa-camera {
font-size: 20px; /* 字体大小为20px */
color: skyblue; /* 颜色为天蓝色 */
}
.fa-hire-a-helper {
font-size: 19px; /* 字体大小为19px */
color: #ffea85; /* 颜色为黄色 */
}
.fa-music {
font-size: 17px; /* 字体大小为17px */
color: #ffd469; /* 颜色为浅黄色 */
}
/* 分割线样式 */
.line {
display: block; /* 显示为块级元素 */
width: 1px; /* 宽度为1px */
height: 46px; /* 高度为46px */
margin: 0 10px; /* 水平外边距为10px */
background-color: #e7e7e7; /* 背景颜色为浅灰色 */
}
/*轮播图*/
.second-section {
display: flex;
justify-content: space-between;
width: 1198px;
height: 242px;
margin: 0 auto;
margin-bottom: 40px;
}
.autoShow {
position: relative;
width: 549px;
height: 100%;
background-color: pink;
opacity: 0;
transition: opacity 0.2s;
overflow: hidden;
}
.autoshow-wrapper img {
width: 550px;
}
.autoshow-wrapper {
width: 550px;
position: relative;
}
.autoshow-wrapper a {
position: absolute;
transition: transform 0.2s;
}
.eat {
position: absolute;
display: flex;
bottom: 10px;
right: 15px;
justify-content: space-between;
align-items: center;
}
.eat span {
display: inline-block;
width: 6px;
height: 6px;
border: 2px solid transparent;
border-radius: 50%;
background-color: #fff;
vertical-align: middle;
cursor: pointer;
transition: all 0.2s;
margin-left: 10px;
z-index: 10;
transition: all linear 0.2s;
}
.eat span:hover {
transform: scale(1.2);
border: 2px solid #fff;
background-color: #00a1d6;
}
.autoShow .eat span.on {
border: 0;
border-color: transparent;
background-color: transparent;
background-image: url(../img/lunbo/pointer.png);
background-size: 100% 100%;
background-repeat: no-repeat;
transform: scale(3);
}
/* 左右切换按钮样式 */
button.prev, button.next {
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
background-color: rgba(0, 0, 0, 0.5);
border: none;
cursor: pointer;
opacity: 0.5; /* 设置按钮初始透明度 */
transition: background-color 0.3s, opacity 0.3s;
border-radius: 20%; /* 设置按钮为弧形 */
}
button.prev {
left: 0;
}
button.next {
right: 0;
}
button.prev:hover, button.next:hover {
background-color: rgba(0, 0, 0, 0.8);
opacity: 1; /* 悬停时设置透明度 */
}
.tuijian {
width: 674px;
display: flex;
flex-wrap: wrap;
align-items: center;
overflow: hidden;
}
.tuijian img {
width: 206px;
height: 116px;
}
.t-1 {
margin-left: 10px;
position: relative;
margin-bottom: 10px;
overflow: hidden;
}
.imgContent {
position: absolute;
color: #fff;
padding: 27px 5px 10px 10px;
width: 100%;
height: 100%;
left: 0;
top: 65px;
font-weight: 500;
text-align: left;
font-size: 14px;
transition: all 0.2s;
white-space: nowrap;
cursor: pointer;
}
.imgContent h2{
font-size: 100%;
vertical-align: baseline;
font: inherit;
}
.up-Wrapper {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
color: #dadad5;
font-size: 12px;
font-weight: 700;
}
.up {
font-size: 12px;
transform: scale(0.8);
line-height: 10px;
font-weight: 600;
text-align: center;
width: 17px;
height: 10px;
border-radius: 3px;
color: #dadad5;
border: 2px solid #dadad5;
}
.uppig {
color: #dadad5;
font-size: 14px;
font-weight: 400;
}
.t-1:hover .imgContent {
top: 0;
background-color: rgba(0, 0, 0, 0.6);
}
/*推广部分*/
.first-report-section {
display: flex;
width: 1202px;
justify-content: space-between;
margin: 0 auto;
margin-bottom: 20px;
}
.f-left-wrapper {
width: 864px;
height: 100%;
overflow: hidden;
}
.f-left-header {
display: flex;
margin-bottom: 20px;
}
.fa-paper-plane {
font-size: 25px;
color: #ffd778;
margin-right: 10px;
}
.f-left-content {
height: 170px;
display: flex;
overflow: hidden;
}
.f-left-content a {
text-decoration: none;
}
.f-left-content div a img{
transition: transform 0.3s ease;
}
.f-left-content div a img:hover{
transform: scale(1.05);
}
.f-left-content a p:hover{
color: #7ecdf4;
}
.f-left-content img {
width: 206px;
height: 116px;
}
.f-left-content div {
margin-right: 10px;
font-size: 14px;
color: #999999;
cursor: pointer;
}
.f-left-content div p {
margin-top: 10px;
color: #212121;
}
.f-right-wrapper {
width: 321px;
height: 100%;
}
.f-right-header {
position: relative;
top: -5px;
cursor: pointer;
width: 320px;
height: 30px;
background-color: #f4f4f4;
border: 1px solid #e7e7e7;
text-align: center;
font-size: 12px;
line-height: 30px;
transition: color 0.2s;
margin-bottom: 12px;
}
.f-right-header:hover {
color: #7ecdf4;
}
.f-right-header h2{
font-size: 12px;
font: inherit;
}
.f-right-content img {
width: 320px;
height: 184px;
}
.reportTitle{
width: 1202px;
margin: 0 auto;
margin-bottom: 20px;
}
.reportTitle img{
width: 100%;
height: 99px;
}
JS
主要有两个分别实现了轮播图和点击图片切换的作用
//头部图片偏移功能
const vidContainer = document.querySelector(".vidContainer");
const vid = document.querySelector(".vid");
vidContainer.addEventListener("mouseenter", function (e) {
this.x = e.clientX;
vid.style.transition = "none";
});
vidContainer.addEventListener("mousemove", function (e) {
this._x = e.clientX;
const disx = this._x - this.x;
const move = 0 - disx / -30;
vid.style.transform = "translate(" + move + "px, 0px)";
});
vidContainer.addEventListener("mouseleave", function (e) {
vid.style.transition = ".3s ";
vid.style.transform = "translate(0,0)";
});
// bilibili logo
let logo = document.querySelector(".biliLogo");
let srcs = document.querySelector(".vid");
let indexPointer = 0;
const lens = 4;
logo.onclick = function () {
if (indexPointer > lens - 1) {
indexPointer = 0;
} else if (indexPointer == 0) {
srcs.src = "../img/banner/2.webm";
indexPointer++;
} else if (indexPointer == 1) {
srcs.src = "../img/banner/3.webm";
indexPointer++;
} else if (indexPointer == 2) {
srcs.src = "../img/banner/4.webm";
indexPointer++;
} else if (indexPointer == 3) {
srcs.src = "../img/banner/headbanner.webm";
indexPointer++;
}
};
//轮播图
document.addEventListener('DOMContentLoaded', function() {
// 获取所有轮播图项目
let items = document.querySelectorAll('.lubo');
// 获取轮播图按钮的容器
let eat = document.querySelector('.eat');
// 设置当前活动项目索引
let active = 0;
// 定时器变量
let timer;
// 根据轮播图项目的数量动态生成按钮
for (let i = 0; i < items.length; i++) {
// 创建按钮元素
let span = document.createElement('span');
// 设置第一个按钮为选中状态
if (i === 0) {
span.classList.add('on');
} else {
// 将其他项目移到屏幕右边
items[i].style.transform = 'translate3d(550px, 0, 0)';
}
// 将按钮添加到容器中
eat.appendChild(span);
// 为每个按钮添加点击事件监听器
span.addEventListener('click', function() {
// 清除定时器
clearInterval(timer);
// 如果点击的不是当前活动项目
if (i !== active) {
clearOn();
span.classList.add('on');
}
// 更新索引
index = i;
// 切换轮播图
changeSlider(i);
// 更新活动项目索引
active = i;
// 重新启动自动播放
autoShow();
});
}
// 切换轮播图函数
function changeSlider(newVal) {
for (let i = 0; i < items.length; i++) {
if (i < newVal) {
// 将项目移到屏幕左边
items[i].style.transform = 'translate3d(-550px, 0, 0)';
} else if (i > newVal) {
// 将项目移到屏幕右边
items[i].style.transform = 'translate3d(550px, 0, 0)';
} else {
// 显示当前项目
items[i].style.transform = 'translate3d(0, 0, 0)';
}
}
}
// 当前索引
let index = 0;
// 获取所有按钮
let spans = document.querySelectorAll('.eat span');
// 清除所有按钮的选中状态
function clearOn() {
spans.forEach(span => span.classList.remove('on'));
}
// 自动播放函数
function autoShow() {
timer = setInterval(function() {
if (index >= items.length) {
index = 0;
}
clearOn();
changeSlider(index);
spans[index].classList.add('on');
index++;
}, 2500);
}
// 启动自动播放
autoShow();
// 设置轮播图的初始透明度
setTimeout(function() {
document.querySelector('.autoShow').style.opacity = '1';
}, 420);
// 左右切换按钮功能
document.querySelector('.prev').addEventListener('click', function() {
clearInterval(timer);
index = (index - 1 + items.length) % items.length;
clearOn();
changeSlider(index);
spans[index].classList.add('on');
autoShow();
});
document.querySelector('.next').addEventListener('click', function() {
clearInterval(timer);
index = (index + 1) % items.length;
clearOn();
changeSlider(index);
spans[index].classList.add('on');
autoShow();
});
});
// 获取当前轮播图的五张图片
let items = document.querySelectorAll('.lubo');
let tigger = $('.tigger');
// console.log(spans)
let active = 0;
let timer ;
// 根据轮播图的数量动态生成按钮
for(let i =0 ; i<items.length;i++){
let span = document.createElement('span');
if(i===0){
span.setAttribute('class','on');
}else{
items[i].setAttribute('style','transform:translate3d(550px,0px,0px)');
}
tigger.append(span);
// 为span创建单击响应事件
span.onclick = function(){
clearInterval(timer);
// alert(1)
// 判断当前是第几个
if(i!==active){
clearOn();
span.setAttribute('class','on');
}
index = i;
changeSilder(i);
active = i;
autoShow();
}
}
function changeSilder(newVal){
for(let i = 0;i<items.length;i++){
if(i < newVal){
items[i].setAttribute('style','transform:translate3d(-550px,0px,0px)');
}else if(i > newVal){
items[i].setAttribute('style','transform:translate3d(550px,0px,0px)');
}else{
items[i].setAttribute('style','transform:translate3d(0px,0px,0px)');
}
}
}
var index = 0;
let spans = $('.tigger span');
function clearOn(){
for(let c = 0;c<items.length;c++){
spans[c].className = '';
}
}
function autoShow(){
timer = setInterval(function(){
if(index > items.length-1){
index=0;
}
clearOn();
changeSilder(index);
spans[index].className='on';
index++;
},2500)
}
// autoShow()
setTimeout(function(){
$('.autoShow').css('opacity','1');
},420)
下载地址 :蓝奏云
Comments NOTHING