前端实战项目：网易云静态页面——轮播图
前言
目前这个前端项目持续更新中~
网易云静态页面——导航栏
Flex布局
文章目录
- 前言
- 实现目标
- 静态实现
-
- 页面大致样子
- 添加模糊的背景图
- 添加图片
- 下载客户端部分
- 轮播图小圆点
- 第一个小圆点变成红色以及当鼠标放上其他任一小圆点也变成红色
- 左右按钮
- 总代码
- 动态实现
实现目标
建立相关文件夹及文件
banner.html是网页结构的部分
banner.css是网页主要的样式
reset.css是网页重置的一些样式
本篇文章用到的图片均来自网易云原网页。
该部分主要由以下几个部分组成：
- 背景（banner）
- 内容（content）
- 左边内容轮播图部分（left）
- 右边内容下载客户端部分（right）
具体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>网易云轮播图title>
<link rel="stylesheet" href="./css/banner.css">
<link rel="stylesheet" href="./css/reset.css">
head>
<body>
<div class="banner">
<div class="content">
<div class="left">div>
<div class="right">div>
div>
div>
body>
html>
静态实现
页面大致样子
添加css代码：
/* reset */
body{
padding: 0;
margin: 0;
}
/* banner */
.banner{
height: 285px;
background-color: antiquewhite;
}
.content{
/* 作为flex container开启弹性布局，目的是为了让left和right排列在一行 */
display: flex;
width: 984px;
/* 上下外边距为0，左右自适应，也就是让它自动居中 */
margin: 0 auto;
}
.content .left{
height: 285px;
width: 730px;
background-color: aqua;
}
.content .right{
height: 285px;
width: 254px;
background-color: aquamarine;
}
显示如下：
添加模糊的背景图
在网易云原网站可以看到，每切换一张图片，它的背景图也跟着切换。下面随机选一张图片及其背景图。
图片：
背景：
.banner{
height: 285px;
/* 添加背景 */
background-image: url(../images/0.jpeg);
/* 让其处于中心位置 */
background-position: center center;
/* 将图片放大，也就是让两边更加模糊 */
background-size: 6000px;
}
显示如下：
添加图片
<div class="left">
<ul class="piclist">
<li><a href="#" class="pic"><img src="./images/1-1.jpeg">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
ul>
div>
/* reset */
body,ul,li{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
/* banner */
.content .left .piclist .pic img{
/* 调整图片大小 */
width: 730px;
}
同时删除left的背景颜色
显示如下：
下载客户端部分
需要用到原网页中的一张图片：
在原网页中，当我们鼠标放在下载客户端时，它的颜色会变暗一点点，这个效果就是用上面两张图片做成的，可以发现下面那个下载客户端明显要暗一点。
整个right就是上面那个背景，然后下载客户端那里是一个a标签（放上鼠标会显示小手）。
<div class="right"><a href="#">下载客户端a>div>
/* banner */
.content .right{
background: url(../images/download1.png);
}
.content .right a{
/* 将这个a标签改为块级元素从而可以设置其宽高 */
display: block;
/* 设置宽高及外边距是为了将这个a标签与背景图中的下载客户端贴合 */
width: 215px;
height: 56px;
margin: 186px 0 0 19px;
}
显示如下：
然后让文字消失并重置a标签的样式
/* banner */
.content .right a{
/* 将这个a标签改为块级元素从而可以设置其宽高 */
display: block;
/* 设置宽高及外边距是为了将这个a标签与背景图中的下载客户端贴合 */
width: 215px;
height: 56px;
margin: 186px 0 0 19px;
/* 让文字消失 */
text-indent: -9999px;
}
/* reset */
a{
text-decoration: none;
}
这时“下载客户端”这段文字就消失了。
同时添加下面代码，当鼠标放在a标签那部分时颜色就会变暗。
.content .right a:hover{
background: url(../images/download1.png) 0 -290px;
}
然后就是下载客户端下面那行字：
<div class="right">
<a href="#">下载客户端a>
<p>PC 安卓 iPhone WP iPad Mac 六大客户端p>
div>
.content .right p{
font-size: 12px;
color: #8d8d8d;
margin: 10px auto;
/* 居中 */
text-align: center;
}
显示如下：
轮播图小圆点
<div class="left">
<ul class="piclist">
<li><a href="#" class="pic"><img src="./images/1-1.jpeg">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
ul>
<ul class="dotlist">
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
ul>
div>
添加css样式让其可视化并移动至相应的位置
.content .left{
position: relative;
height: 285px;
width: 730px;
}
.content .left .dotlist{
/* 浮动布局，让所有li元素在一行排列 */
display: flex;
/* 让这个小圆点列表可视化 */
width: 200px;
height: 20px;
background-color: red;
/* 绝对定位后，让其偏移到相应位置（注意绝对定位是相对的，要先设置其父元素为相对定位 */
position: absolute;
/* 距离left底部5px */
bottom: 5px;
/* 居中 */
left: 0;
right: 0;
margin: 0 auto;
}
显示如下：
下面删除让其可视化部分的css代码。
原网页中的小圆点及后面的按钮等都是是通过下面这张图片来实现的：
.content .left .dotlist{
/* 浮动布局，让所有li元素在一行排列 */
display: flex;
/* 绝对定位后，让其偏移到相应位置（注意绝对定位是相对的，要先设置其父元素为相对定位 */
position: absolute;
/* 距离left底部5px */
bottom: 5px;
/* 居中 */
left: 0;
right: 0;
margin: 0 auto;
/* 上面那个居中是dotlist这个列表相对于left的居中，这里的center是dotlist的子元素相对于dotlist居中 */
justify-content: center;
}
.content .left .dotlist .dot{
/* 将a标签转换成块级元素，从而可以设置宽高 */
display: block;
/* 设置每个小圆点的边距 */
margin: 0 2px;
width: 20px;
height: 20px;
/* 给每个a标签换一个背景图，这个背景图就是白色小圆点 */
background: url(../images/lunbotu.png) 3px -343px;
}
显示如下：
第一个小圆点变成红色以及当鼠标放上其他任一小圆点也变成红色
第一个小圆点变成红色只需单独为其设置一个样式即可
<ul class="dotlist">
<li><a href="#" class="dot active">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
ul>
.content .left .dotlist .dot.active,
.content .left .dotlist .dot:hover{
background: url(../images/lunbotu.png) -16px -343px;
}
页面如下：
左右按钮
左右按钮用a便签来实现，将其变成块级元素，并给上一个背景图
<div class="content">
<div class="left">
<ul class="piclist">
<li><a href="#" class="pic"><img src="./images/1-1.jpeg">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
ul>
<ul class="dotlist">
<li><a href="#" class="dot active">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
ul>
div>
<div class="right">
<a href="#">下载客户端a>
<p>PC 安卓 iPhone WP iPad Mac 六大客户端p>
div>
<a href="#" class="button left-btn">lefta>
<a href="#" class="button right-btn">righta>
div>
.content .button{
/* 变成块级元素 */
display: block;
width: 37px;
height: 63px;
/* 绝对定位，使其定位到相应的位置，同时设置content为相对定位 */
position: absolute;
/* 居中显示 */
top: 0;
bottom: 0;
margin: auto 0;
}
.content .left-btn{
/* 让它到content的外面去 */
left: -68px;
background: url(../images/lunbotu.png) 0 -360px;
}
.content .right-btn{
right: -68px;
background: url(../images/lunbotu.png) 0 -508px;
}
页面如下：
删除a便签里的文本内容，同时在原网页中，当我们把鼠标放上左右按钮时，它们的背景会变暗一点，这同样是通过设置一个背景图来实现的。
.content .left-btn:hover{
background: url(../images/lunbotu.png) 0 -430px;
}
.content .right-btn:hover{
background: url(../images/lunbotu.png) 0 -578px;
}
页面如下：
到这里整个轮播图的静态页面就制作完成了，因为我之前做过轮播图，所以在这里也就当一个练习做一下。
总代码
- banner.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>网易云轮播图title>
<link rel="stylesheet" href="./css/banner.css">
<link rel="stylesheet" href="./css/reset.css">
head>
<body>
<div class="banner">
<div class="content">
<div class="left">
<ul class="piclist">
<li><a href="#" class="pic"><img src="./images/1-1.jpeg">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
<li><a href="#" class="pic">a>li>
ul>
<ul class="dotlist">
<li><a href="#" class="dot active" data="0">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
<li><a href="#" class="dot">a>li>
ul>
div>
<div class="right">
<a href="#">下载客户端a>
<p>PC 安卓 iPhone WP iPad Mac 六大客户端p>
div>
<a href="#" class="button left-btn">a>
<a href="#" class="button right-btn">a>
div>
div>
body>
html>
- banner.css
.banner{
height: 285px;
/* 添加背景 */
background-image: url(../images/0.jpeg);
/* 让其处于中心位置 */
background-position: center center;
/* 将图片放大，也就是让两边更加模糊 */
background-size: 6000px;
}
.content{
position: relative;
/* 作为flex container开启弹性布局，目的是为了让left和right排列在一行 */
display: flex;
width: 984px;
/* 上下外边距为0，左右自适应，也就是让它自动居中 */
margin: 0 auto;
}
.content .left{
position: relative;
height: 285px;
width: 730px;
}
.content .right{
height: 285px;
width: 254px;
}
.content .left .piclist .pic img{
/* 调整图片大小 */
width: 730px;
}
.content .right{
background: url(../images/download1.png);
}
.content .right a{
/* 将这个a标签改为块级元素从而可以设置其宽高 */
display: block;
/* 设置宽高及外边距是为了将这个a标签与背景图中的下载客户端贴合 */
width: 215px;
height: 56px;
margin: 186px 0 0 19px;
/* 让文字消失 */
text-indent: -9999px;
}
.content .right a:hover{
background: url(../images/download1.png) 0 -290px;
}
.content .right p{
font-size: 12px;
color: #8d8d8d;
margin: 10px auto;
/* 居中 */
text-align: center;
}
.content .left .dotlist{
/* 浮动布局，让所有li元素在一行排列 */
display: flex;
/* 绝对定位后，让其偏移到相应位置（注意绝对定位是相对的，要先设置其父元素为相对定位 */
position: absolute;
/* 距离left底部5px */
bottom: 5px;
/* 居中 */
left: 0;
right: 0;
margin: 0 auto;
/* 上面那个居中是dotlist这个列表相对于left的居中，这里的center是dotlist的子元素相对于dotlist居中 */
justify-content: center;
}
.content .left .dotlist .dot{
/* 将a标签转换成块级元素，从而可以设置宽高 */
display: block;
/* 设置每个小圆点的边距 */
margin: 0 2px;
width: 20px;
height: 20px;
/* 给每个a标签换一个背景图，这个背景图就是白色小圆点 */
background: url(../images/lunbotu.png) 3px -343px;
}
.content .left .dotlist .dot.active,
.content .left .dotlist .dot:hover{
background: url(../images/lunbotu.png) -16px -343px;
}
.content .button{
/* 变成块级元素 */
display: block;
width: 37px;
height: 63px;
/* 绝对定位，使其定位到相应的位置，同时设置content为相对定位 */
position: absolute;
/* 居中显示 */
top: 0;
bottom: 0;
margin: auto 0;
}
.content .left-btn{
/* 让它到content的外面去 */
left: -68px;
background: url(../images/lunbotu.png) 0 -360px;
}
.content .right-btn{
right: -68px;
background: url(../images/lunbotu.png) 0 -508px;
}
.content .left-btn:hover{
background: url(../images/lunbotu.png) 0 -430px;
}
.content .right-btn:hover{
background: url(../images/lunbotu.png) 0 -578px;
}
- reset.css
body,ul,li{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
动态实现
之前写过一篇关于轮播图的文章，这里就当自己练习一下了，直接给出总代码
- 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>网易云轮播图title>
<link rel="stylesheet" href="./css/banner.css">
<link rel="stylesheet" href="./css/reset.css">
head>
<body>
<div class="banner">
<div class="content">
<div class="left">
<ul class="piclist">
<li><a href="#" class="pic"><img src="./images/1-1.jpeg">a>li>
<li><a href="#" class="pic up"><img src="./images/2-2.jpeg">a>li>
<li><a href="#" class="pic"><img src="./images/3-3.jpeg">a>li>
<li><a href="#" class="pic"><img src="./images/4-4.jpeg">a>li>
<li><a href="#" class="pic"><img src="./images/5-5.jpeg">a>li>
<li><a href="#" class="pic"><img src="./images/6-6.jpeg">a>li>
<li><a href="#" class="pic"><img src="./images/7-7.jpeg">a>li>
<li><a href="#" class="pic"><img src="./images/8-8.jpeg">a>li>
<li><a href="#" class="pic"><img src="./images/9-9.jpeg">a>li>
<li><a href="#" class="pic"><img src="./images/10-10.jpeg">a>li>
ul>
<ul class="dotlist">
<li><a href="#" class="dot active" data="0">a>li>
<li><a href="#" class="dot" data="1">a>li>
<li><a href="#" class="dot" data="2">a>li>
<li><a href="#" class="dot" data="3">a>li>
<li><a href="#" class="dot" data="4">a>li>
<li><a href="#" class="dot" data="5">a>li>
<li><a href="#" class="dot" data="6">a>li>
<li><a href="#" class="dot" data="7">a>li>
<li><a href="#" class="dot" data="8">a>li>
<li><a href="#" class="dot" data="9">a>li>
ul>
div>
<div class="right">
<a href="#">下载客户端a>
<p>PC 安卓 iPhone WP iPad Mac 六大客户端p>
div>
<a href="#" class="button left-btn">a>
<a href="#" class="button right-btn">a>
div>
div>
<script src="./banner.js">script>
body>
html>
- css（仅给出在上面css基础上更改过的代码）
.content .left .dotlist{
/* 浮动布局，让所有li元素在一行排列 */
display: flex;
/* 绝对定位后，让其偏移到相应位置（注意绝对定位是相对的，要先设置其父元素为相对定位 */
position: absolute;
/* 距离left底部5px */
bottom: 5px;
/* 居中 */
left: 0;
right: 0;
margin: 0 auto;
/* 上面那个居中是dotlist这个列表相对于left的居中，这里的center是dotlist的子元素相对于dotlist居中 */
justify-content: center;
/* 让小圆点处于最上面的一层 */
z-index: 1000;
}
.content .left .piclist{
display: flex;
overflow: hidden;
}
.up{
/* 设置z-index的元素一定要进行定位才行，默认值static也是不生效的 */
z-index: 100;
}
.content .left .piclist .pic{
position: absolute;
}
- js
// 获取小圆点
var dotList = document.getElementsByClassName("dot");
// 获取图片
var picList = document.getElementsByClassName("pic");
// 获取模糊背景
var bg = document.getElementsByClassName("banner");
// 获取左按钮
var btnLeft = document.getElementsByClassName("left-btn");
// 获取右按钮
var btnRight = document.getElementsByClassName("right-btn");
// 全局变量，索引
index = 0;
// 清除active、up样式
var clearUp = function(){
for(var i = 0 ; i < dotList.length ; i++){
dotList[i].className = "dot";
picList[i].className = "pic";
}
}
// 点击小圆点后相应图片和小圆点的样式改变，同时模糊的背景也改变
var goDot = function(){
dotList[index].className = "dot active";
picList[index].className = "pic up";
bg[0].style.background = "url(../images/" + index + ".jpeg)";
}
// 点击小圆点触发跳转事件
for(var i = 0 ; i < dotList.length ; i++){
dotList[i].addEventListener("click",function(){
var dotIndex = this.getAttribute("data");
index = dotIndex;
clearUp();
goDot();
time = 0;
})
}
// 点击左按钮跳转上一张图片
var goLast = function(){
if(index > 0){
index--;
} else{
index = 9;
}
clearUp()
dotList[index].className = "dot active";
picList[index].className = "pic up";
bg[0].style.background = "url(../images/" + index + ".jpeg)";
}
// 点击右按钮跳转下一张图片
var goNext = function(){
if(index < 9){
index++;
} else{
index = 0;
}
clearUp();
dotList[index].className = "dot active";
picList[index].className = "pic up";
bg[0].style.background = "url(../images/" + index + ".jpeg)";
}
// 点击左按钮触发跳转事件
btnLeft[0].addEventListener("click",function(){
goLast();
time = 0;
})
// 点击右按钮触发跳转事件
btnRight[0].addEventListener("click",function(){
goNext();
time = 0;
})
// 自动轮播，每5秒跳转到下一张图片
setInterval(function(){
time++;
if(time == 25){
goNext();
time = 0;
}
},200)
以上就是动态实现的代码了。写到这里呢这个部分也算是结束了，如果有不足或者有代码没讲清楚的地方，欢迎大家指教或指正！