HTML+css+JS制作导航和banner
今天主要讲解一下如何利用HTML、css、js制作导航和banner图，一个整体的网页这两者是少不了的，在我看来应该也是最重要的部分，刚开始学习网页制作时对于小白的我来说其实这一块还是比较难的一点，尤其是banner轮播，随着后来老师的讲解以及自己课外的学习，慢慢的也就会做了，希望这篇文章能帮助到大家。
下面是我依据腾讯手游助手官网的导航和banner写的具体代码。
一、导航栏的制作
（1）首先是导航栏的HTML部分，它的导航其实相对来说还是比较简单的，没有过多复杂的css美化样式，这一块和我们平时写的导航差不多，这里我给它添加了一个二级导航，在平时写代码的过程中我们一定要养成一个写注释的好习惯，哈哈这也是我的老师平时教会我的，嘿嘿让我也是记忆深刻呀；
腾讯手游助手官网
（2）下面就是css部分，这里我是用scss来写的；
.top{
width: 100%;
height: 80px;
background: rgba(43,43,52,0.6);
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
z-index: 2;
align-items: center;
min-width: 1100px;
}
.pageNav{
width: 1080px;
height: 80px;
display: flex;
flex-flow: row;
align-items: center;
}
.fLinksUl{
color: #fff;
margin-left: 30px;
display: flex;
flex: 1 1;
align-items: center;
position: relative;
}
.JS_li{
height: 80px;
line-height: 80px;
display: flex;
align-items: baseline;
justify-content: center;
min-width: 100px;
cursor: pointer;
box-sizing: border-box;
position: relative;
&.current {
img {
transform: rotateZ(180deg);
}
}
a{
display: block;
font-size: 16px;
color: #fff;
img{
width: 12px;
height: 12px;
transition: all 0.2s;
margin-left: 5px;
vertical-align: middle;
}
}
}
.guidenceLi{
height: 80px;
line-height: 80px;
display: flex;
align-items: baseline;
justify-content: center;
min-width: 100px;
cursor: pointer;
box-sizing: border-box;
position: relative;
a{
display: block;
font-size: 16px;
color: #fff;
}
}
.line{
border-bottom: 4px solid #ff3f3f
}
.submenu{
position: absolute;
left:0;
top:80px;
background: rgba(43,43,52,0.6);
width: 260px;
height: 150px;
overflow: auto;
display: none;
&.show{
display: block;
}
}
.submenuUl{
display: flex;
flex-wrap: wrap;
a{
display: block;
padding-left: 20px;
padding-right: 20px;
color: #fff;
&:hover{
color: #ff3f3f;
}
}
}
.client{
display: flex;
align-items: center;
}
.client{
.client_btn1{
width: 120px;
height: 40px;
line-height: 40px;
font-size: 14px;
border-radius: 8px 0 8px 0;
cursor: pointer;
text-align: center;
letter-spacing: 0;
background: #ff3f3f;
color: #fff;
}
.client_btn2{
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-left: 8px;
width: 104px;
padding: 0 8px;
height: 40px;
background: #538df4;
border-radius: 8px 0;
line-height: 14px;
color: #fff;
cursor: pointer;
text-align: center;
font-size: 14px;
&:hover{
box-shadow: inset 0 0 8px #09f0ff;
}
}
}（3）接下来就是JS部分，这里主要是二级导航运用到了js;
let lies = document.getElementsByClassName("JS_li");
// 二级菜单 JS_sub
let sub = document.querySelectorAll(".JS_sub");
// 找兄弟标签的函数
function findBro(tag){
let broArr = [];
// 借用父标签找兄弟们，不包括 tag
let parent = tag.parentNode ; // 父标签
let children = parent.children; // 找所有的孩子，包括了tag自己
for(let i=0; i<=children.length-1; i++){
// 如果 tag 不等于遍历的孩子，说明这个孩子就是兄弟
if( tag !== children[i]){
broArr.push(children[i]);
}
}
return broArr ; // 返回结果：兄弟标签数组
}
// 添加事件
for(let i=0; i<=lies.length-1 ; i++){
lies[i].addEventListener("click",function(){
// 找二级菜单方式一： let submenu = lies[i].children[1] ;
// 找二级菜单方式二：
let submenu = sub[i];
this.classList.add("current");
submenu.classList.add("show");
// 其它 li 标签就去掉对应的类
let thisBro = findBro(this); // 数组
thisBro.forEach(function (item, index) {
item.classList.remove("current");
// 找到对应的二级菜单
item.children[i].classList.remove("show");
});
// let submenuBro = findBro(submenu);
// console.info(submenuBro);
});
}
// 给 body 标签添加事件
// 点击二级菜单消失
document.body.addEventListener("click",function(event){
// 事件冒泡。
// event.target 获得实际点击的标签。 点击一级菜单的时候，发现点的是 a 。
// 如果点击了的标签的 父标签有类 JS_li，说明点了一级菜单 a，那么二级菜单就不消失。
if( event.target.parentNode.classList.contains("JS_li") ){
// console.info("点击了一级菜单")
return ;
}else{ // 点击其它位置，二级菜单消失。
// 遍历二级菜单（一级菜单 li 的索引跟 二级菜单保持一致 ）
// 把二级菜单和一级菜单 li 的类都去掉。
for(let i=0; i<=sub.length-1 ; i++){
sub[i].classList.remove("show");
lies[i].classList.remove("current");
}
}
});二、banner部分的制作
（1）HTML部分，这一块使用最多的就是列表标签了，它不同于以往的banner在于，之前见得最多的下面的轮播要么是点要么是类似于长方形的一条线，但是它的是图片，而且它在进行轮播过程中会有放大的效果，其实也不是很难还是和以往的做法一样只不过要稍微变变样而已，下面是完整代码；
（2）css部分
.Box{
width: 100%;
overflow-x: hidden;
height: 758px;
position: relative;
margin: auto;
background: #000000;
}
.bannerBox{
position: relative;
left: 0;
top: 0;
margin-left: auto;
margin-right: auto;
}
.jd-banner {
min-width: 1100px;
height: 758px;
//background: #033F7E;
position: relative;
overflow: hidden;
//top: 0px;
}
.jd-banner{
.clearfix{
//width: 15360px;
height: 758px;
//position: absolute;
top: 0;
position: relative;
}
}
.jd-banner{
.clearfix{
.item{
width: 100%;
height: 100%;
position: absolute;
left: 0;
opacity: 0;
transition:all 2s;
a{
display: block;
}
}
.active{
//z-index: 10;
opacity: 1;
}
}
}
.jd-banner{
.clearfix{
.item{
img{
width: 1922px;
height: 728px;
margin: auto;
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%,-50%);
//width: 100%;
//height: 100%;
//position: relative;
}
}
}
}
.banenr_Slider{
width: 1080px;
height: 728px;
top: -50px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;
z-index: 1;
//opacity: 0;
//background: #55a532;
display: flex;
flex-flow: column;
justify-content: center;
}
.bannerRight{
align-items: flex-end;
}
.bannerS_title{
font-size: 60px;
color: #fff;
letter-spacing: 0;
text-shadow: 0 2px 8px rgba(0 ,0, 0, 0.5);
font-weight: 700;
height: 75px;
line-height: 75px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
animation: ani 2s linear;
}
.bannerS_wz{
font-size: 24px;
color: #fff;
width: 470px;
letter-spacing: 0;
line-height: 36px;
font-weight: 700;
text-shadow: 0 2px 8px rgba(0 ,0, 0, 0.5);
overflow: hidden;
height: 72px;
text-overflow: ellipsis;
display: -webkit-box;
//-webkit-line-clamp:2;
-webkit-box-orient: vertical;
animation: ani 2s linear;
}
.banerStext{
text-align: right;
}
.bannerLoad{
margin-top: 40px;
width: 220px;
height: 62px;
line-height: 62px;
border-radius: 20px 0 20px 0;
font-size: 28px;
font-weight: bold;
text-align: center;
background: #ff3f3f;
color: #fff;
animation: ani 2s linear;
}
@keyframes ani {
0%{
transform: translateX(0);
opacity: 0;
}
100%{
transform: translateX(600);
opacity: 1;
}
}
.previousBtn{
z-index: 100;
position: absolute;
width: 40px;
height:40px;
background-color: rgba(210, 210, 210, 0.4);
border-radius: 50%;
transform: translateY(-50%);
top: 50%;
left: 0px;
}
.previousBtn{
a{
display: block;
position: absolute;
left: 0px;
top: 10px;
width: 20px;
height: 20px;
background-position: -22px 0px;
}
}
.previousBtn{
&:hover{
border: 1px solid #fff;
background-color: transparent;
}
}
.nextBtn{
position: absolute;
width: 40px;
height: 40px;
background-color: rgba(210, 210, 210, 0.4);
border-radius: 50%;
transform: translateY(-50%);
top: 50%;
right: 0px;
}
.nextBtn{
a{
display: block;
position: absolute;
left: 0px;
top: 10px;
width: 20px;
height: 20px;
background-position: -22px 0px;
transform: scaleX(-1);/*镜像*/
}
}
.nextBtn{
&:hover{
border: 1px solid #fff;
background-color: transparent;
}
}
.bannerPoint{
//bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
width: 1080px;
height: 110px;
left: 0;
right: 0;
margin: auto;
position: absolute;
bottom: -25px;
li{
display: inline-block;
margin-right: 3px;
img{
width: 164px;
height: 82px;
}
}
.active{
transform: scale(1.1);
}
}（3）JS部分
let items = document.querySelectorAll(".item");//图片节点
let points = document.querySelectorAll(".point")//点
let left = document.getElementById("leftBtn");
let right = document.getElementById("rightBtn");
let all = document.querySelector(".jd-banner")
let index = 0;
let time = 0;//定时器跳转参数初始化
//封装一个清除active方法
let clearActive = function () {
for (i = 0; i < items.length; i++) {
items[i].className = 'item';
}
for (j = 0; j < points.length; j++) {
points[j].className = 'point';
}
}
//改变active方法
let goIndex = function () {
clearActive();
items[index].className = 'item active';
points[index].className = 'point active'
}
//左按钮事件
let goLeft = function () {
if (index == 0) {
index = 5;
} else {
index--;
}
goIndex();
}
//右按钮事件
let goRight = function () {
if (index < 5) {
index++;
} else {
index = 0;
}
goIndex();
}
//绑定点击事件监听
left.addEventListener('click', function () {
goLeft();
time = 0;//计时器跳转清零
})
right.addEventListener('click', function () {
goRight();
time = 0;//计时器跳转清零
})
for(i = 0;i < points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex = this.getAttribute('data-index')
index = pointIndex;
goIndex();
time = 0;//计时器跳转清零
})
}
//计时器轮播效果
let timer;
function play(){
timer = setInterval(() => {
time ++;
if(time == 20 ){
goRight();
time = 0;
}
},500)
}
play();
//移入清除计时器
all.onmousemove = function(){
clearInterval(timer)
}
//移出启动计时器
all.onmouseleave = function(){
play();
}
我们来看一下整体效果吧！
演示效果