轮播图顺序：
1.写出结构和样式，写样式时，banner的背景图片不显示出来，原因是没有给背景的块级元素设置宽高。
2.先完成图片自动轮播过程，接着完成圆点点击效果，最后再实现上一张、下一张效果。
导航菜单栏顺序：
1.先用一个兄弟元素将透明的导航栏背景写好，接着写一级菜单（注：各个一级菜单之间为兄弟元素，而且外面要用一个盒子将一级菜单包裹住，因为在写js的鼠标离开一级菜单，二级菜单菜单消失时会用到）。
2.接着写二级菜单的样式，为了减少bug，推荐使用每个二级菜单都用背景图片的盒子包裹住（在写js的时候更能理解），而不是用一个背景图片盒子包裹住所有二级菜单。
3.写完别的效果以后，写鼠标离开一级菜单盒子的效果，鼠标从一级菜单盒子进入二级菜单的效果，鼠标从二级菜单离开的效果。最后再写鼠标滑过一级菜单改变其背景的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="lunbo.css">
</head>
<body>
<div class="main" id="main">
<div class="menu-box"></div>
<!--子菜单-->
<div class="sub-menu hide" id="submenu">
<!--手机、配件-->
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">手机、配件</div>
<div class="sub-row">
<span class="bold mr10">手机通讯：</span>
<a href="#">手机</a>
<span class="mr10 ml10">/</span>
<a href="#">手机维修</a>
<span class="mr10 ml10">/</span>
<a href="#">以旧换新</a>
</div>
<div class="sub-row">
<span class="bold mr10">手机配件：</span>
<a href="">手机壳</a>
<span class="ml10 mr10">/</span>
<a href="">手机存储卡</a>
<span class="ml10 mr10">/</span>
<a href="">数据线</a>
<span class="ml10 mr10">/</span>
<a href="">充电器</a>
<span class="ml10 mr10">/</span>
<a href="">电池</a>
</div>
<div class="sub-row">
<span class="bold mr10">运营商：</span>
<a href="">中国联通</a>
<span class="ml10 mr10">/</span>
<a href="">中国移动</a>
<span class="ml10 mr10">/</span>
<a href="">中国电信</a>
</div>
<div class="sub-row">
<span class="bold mr10">智能设备：</span>
<a href="">智能手环</a>
<span class="ml10 mr10">/</span>
<a href="">智能家居</a>
<span class="ml10 mr10">/</span>
<a href="">智能手表</a>
<span class="ml10 mr10">/</span>
<a href="">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">娱乐：</span>
<a href="">耳机</a>
<span class="ml10 mr10">/</span>
<a href="">音响</a>
<span class="ml10 mr10">/</span>
<a href="">收音机</a>
<span class="ml10 mr10">/</span>
<a href="">麦克风</a>
</div>
</div>
</div>
<!--电脑-->
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">电脑</div>
<div class="sub-row">
<span class="bold mr10">电脑：</span>
<a href="">笔记本</a>
<span class="ml10 mr10">/</span>
<a href="">平板</a>
<span class="ml10 mr10">/</span>
<a href="">一体机</a>
</div>
<div class="sub-row">
<span class="bold mr10">电脑配件：</span>
<a href="">显示器</a>
<span class="ml10 mr10">/</span>
<a href="">CPU</a>
<span class="ml10 mr10">/</span>
<a href="">主板</a>
<span class="ml10 mr10">/</span>
<a href="">硬盘</a>
<span class="ml10 mr10">/</span>
<a href="">电源</a>
<span class="ml10 mr10">/</span>
<a href="">显卡</a>
<span class="ml10 mr10">/</span>
<a href="">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">游戏设备：</span>
<a href="">游戏机</a>
<span class="ml10 mr10">/</span>
<a href="">耳机</a>
<span class="ml10 mr10">/</span>
<a href="">游戏软件</a>
</div>
<div class="sub-row">
<span class="bold mr10">网络产品：</span>
<a href="">路由器</a>
<span class="ml10 mr10">/</span>
<a href="">网络机顶盒</a>
<span class="ml10 mr10">/</span>
<a href="">交换机</a>
<span class="ml10 mr10">/</span>
<a href="">存储卡</a>
<span class="ml10 mr10">/</span>
<a href="">网卡</a>
</div>
<div class="sub-row">
<span class="bold mr10">外部产品：</span>
<a href="">鼠标</a>
<span class="ml10 mr10">/</span>
<a href="">键盘</a>
<span class="ml10 mr10">/</span>
<a href="">U盘</a>
<span class="ml10 mr10">/</span>
<a href="">移动硬盘</a>
<span class="ml10 mr10">/</span>
<a href="">鼠标垫</a>
<span class="ml10 mr10">/</span>
<a href="">电脑清洁</a>
</div>
</div>
</div>
<!--家用电器-->
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">家用电器</div>
<div class="sub-row">
<span class="bold mr10">电视：</span>
<a href="">国产品牌</a>
<span class="ml10 mr10">/</span>
<a href="">韩国品牌</a>
<span class="ml10 mr10">/</span>
<a href="">欧美品牌</a>
</div>
<div class="sub-row">
<span class="bold mr10">空调：</span>
<a href="">显示器</a>
<span class="ml10 mr10">/</span>
<a href="">柜式</a>
<span class="ml10 mr10">/</span>
<a href="">中央</a>
<span class="ml10 mr10">/</span>
<a href="">壁挂式</a>
</div>
<div class="sub-row">
<span class="bold mr10">冰箱：</span>
<a href="">多门</a>
<span class="ml10 mr10">/</span>
<a href="">对开门</a>
<span class="ml10 mr10">/</span>
<a href="">三门</a>
<span class="ml10 mr10">/</span>
<a href="">双门</a>
</div>
<div class="sub-row">
<span class="bold mr10">洗衣机：</span>
<a href="">滚筒式洗衣机</a>
<span class="ml10 mr10">/</span>
<a href="">迷你洗衣机</a>
<span class="ml10 mr10">/</span>
<a href="">洗烘一体机</a>
</div>
<div class="sub-row">
<span class="bold mr10">厨房电器：</span>
<a href="">油烟机</a>
<span class="ml10 mr10">/</span>
<a href="">洗碗机</a>
<span class="ml10 mr10">/</span>
<a href="">燃气灶</a>
</div>
</div>
</div>
<!--家具-->
<div class="inner-box">
<div class="sub-inner-box">
<div class="title">家具</div>
<div class="sub-row">
<span class="bold mr10">家纺：</span>
<a href="">被子</a>
<span class="ml10 mr10">/</span>
<a href="">枕头</a>
<span class="ml10 mr10">/</span>
<a href="">四件套</a>
<span class="ml10 mr10">/</span>
<a href="">床垫</a>
</div>
<div class="sub-row">
<span class="bold mr10">灯具：</span>
<a href="">台灯</a>
<span class="ml10 mr10">/</span>
<a href="">顶灯</a>
<span class="ml10 mr10">/</span>
<a href="">节能灯</a>
<span class="ml10 mr10">/</span>
<a href="">应急灯</a>
</div>
<div class="sub-row">
<span class="bold mr10">厨具：</span>
<a href="">烹饪锅具</a>
<span class="ml10 mr10">/</span>
<a href="">餐具</a>
<span class="ml10 mr10">/</span>
<a href="">菜板刀具</a>
</div>
<div class="sub-row">
<span class="bold mr10">家装：</span>
<a href="">地毯</a>
<span class="ml10 mr10">/</span>
<a href="">沙发垫套</a>
<span class="ml10 mr10">/</span>
<a href="">装饰字画</a>
<span class="ml10 mr10">/</span>
<a href="">照片墙</a>
<span class="ml10 mr10">/</span>
<a href="">窗帘</a>
</div>
<div class="sub-row">
<span class="bold mr10">生活日用：</span>
<a href="">收纳用品</a>
<span class="ml10 mr10">/</span>
<a href="">浴室用品</a>
<span class="ml10 mr10">/</span>
<a href="">雨伞雨衣</a>
</div>
</div>
</div>
</div>
<!--主菜单-->
<div class="menu-content" id="menucont">
<div class="menu-item">
<a href="">
<span>手机、配件</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>电脑</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家用电器</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家具</span>
<i></i>
</a>
</div>
</div>
<!--轮播图片-->
<div class="banner" id="banner">
<a href="">
<div class="slide img1 active"></div>
</a>
<a href="">
<div class="slide img2"></div>
</a>
<a href="">
<div class="slide img3"></div>
</a>
</div>
<!--圆点-->
<div class="dot" id="dot">
<span class="active"></span>
<span></span>
<span></span>
</div>
<!--上一张、下一张-->
<div class="all next" id="next"></div>
<div class="all prev" id="prev"></div>
</div>
<script type="text/javascript" src="lunbo.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: #333;
}
@font-face {font-family: 'iconfont';
src: url('img/font/iconfont.eot');
src: url('img/font/iconfont.eot') format('embedded-opentype'),
url('img/font/iconfont.woff') format('woff'),
url('img/font/iconfont.ttf') format('truetype'),
url('img/font/iconfont.svg#iconfont') format('svg');
}
.main{
width: 1200px;
height: 460px;
overflow: hidden;
margin: 30px auto;
position: relative;
}
.main .banner{
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
}
.slide{
width: 1200px;
height: 460px;
position: absolute;
display: none;
}
.img1{
background: url(img/bg1.jpg) no-repeat;
}
.img2{
background: url(img/bg2.jpg) no-repeat;
}
.img3{
background: url(img/bg3.jpg) no-repeat;
}
.banner .active{
display: block;
}
.main .dot{
position: absolute;
bottom: 10px;
right: 10px;
}
.dot span{
display: inline-block;
float: left;
width: 15px;
height:15px;
border-radius: 50%;
background:rgba(7,17,27,0.5);
box-shadow: 0 0 0 2px rgba(255,255,255,0.5) inset;
margin-right: 8px;
cursor: pointer;
}
.dot .active{
background-color: white;
box-shadow: 0 0 0 2px rgba(7,17,27,0.5) inset;
}
.main .all{
position: absolute;
left: 244px;
width: 40px;
height: 80px;
top: 50%;
margin-top: -40px;
background:url(img/arrow.png) center no-repeat;
cursor: pointer;
}
.main .all:hover{
background-color: rgba(7,17,27,0.5);
}
.main .next{
left: auto;
right: 0;
}
.main .prev{
transform: rotate(180deg);
}
/*导航菜单*/
.menu-box{
width: 244px;
height: 460px;
position: absolute;
left: 0;
right: 0;
background:rgba(7,17,27,0.5);
z-index: 1;
}
.menu-content{
width: 244px;
height: 454px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
padding-top: 6px;
}
.menu-item{
height: 64px;
line-height: 66px;
font-size: 16px;
padding: 0 24px;
}
.menu-item a{
display: block;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.2);
height: 63px;
padding: 0 8px;
}
.menu-item i{
position: absolute;
right: 32px;
font-family: iconfont;
font-size: 24px;
font-weight: normal;
font-style: normal;
}
.sub-menu{
width: 730px;
height: 458px;
border: 1px solid #d9dde1;
background: #fff;
position: absolute;
left: 244px;
top: 0;
z-index: 999;
}
.inner-box{
width: 100%;
height: 100%;
background: url(img/fe.png) no-repeat;
display: none;
}
.sub-inner-box{
width: 650px;
margin-left: 30px;
overflow: hidden;
}
.title{
color: red;
font-size: 16px;
line-height: 16px;
margin: 28px 0 30px 0;
font-weight: bold;
}
.sub-row{
margin-bottom: 25px;
}
.bold{
font-weight: bold;
}
.mr10{
margin-right: 10px;
}
.ml10{
margin-left: 10px;
}
.hide{
display: none;
}
//封装一个document.getElementById的方法
function byId(id){
return typeof(id) === "string" ? document.getElementById("id"):id;
}
var mains=byId(main),
timer=null,
index=0,
banners=byId(banner).getElementsByTagName('div'),
dots=byId(dot),
spans=dots.getElementsByTagName("span"),
prevs=byId(prev),
nexts=byId(next),
len=banners.length,
submenus=byId(submenu),
menu=byId(menucont),
innerBox=submenus.getElementsByClassName('inner-box'),
menus=menu.getElementsByClassName('menu-item');
//图片轮播函数
function slideImg(){
//鼠标滑过，轮播停止
mains.onmouseover=function(){
if (timer) {
clearInterval(timer);
}
}
//鼠标离开，轮播开始
mains.onmouseout=function(){
timer=setInterval(function(){
index++;
if (index>=len) index=0;
changeImg(index);
},1000)
}
mains.onmouseout();
//鼠标点击圆点
for(var d=0;d<len;d++){
spans[d].id=d;
spans[d].onclick=function(){
index=this.id;
changeImg(index);
}
}
//上一张，下一张
nexts.onclick=function(){
index++;
if (index>=len) {
index=0;
}
changeImg(index);
}
prevs.onclick=function(){
index--;
if (index<0) {
index=len-1;
}
changeImg(index);
}
//导航菜单
//遍历主菜单，且绑定事件
for(var m=0;m<menus.length;m++){
menus[m].setAttribute('data-index',m);
menus[m].onmouseover=function(){
var ids=this.getAttribute('data-index');
for(var a=0;a<menus.length;a++){
innerBox[a].style.display="none";
menus[a].style.background="none";
}
submenus.className="sub-menu";
menus[ids].style.background="rgba(255,255,255,0.3)";
innerBox[ids].style.display="block";
}
menu.onmouseout=function(){
submenus.className="sub-menu hide";
}
submenus.onmouseover=function(){
this.className="sub-menu";
}
submenus.onmouseout=function(){
this.className="sub-menu hide";
}
}
}
function changeImg(index){
for(var i=0;i<len;i++){
banners[i].style.display="none";
spans[i].className="";
}
banners[index].style.display="block";
spans[index].className="active";
}
slideImg()前端小白的一点体会！
2086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
