项目收获
封装getElementById（），使用更方便。
Function (id){
Return typeof(id)===”string”?Document.getElementById(id):id;
}
getElementsByClassName IE8以下版本不支持
图片与圆点的联动通过index，和一个方法来实现
自定义属性
item[i].setAttribute(“data-index”,i);
dix=this.getAttribute(“data-index”);
步骤
1.封装getElementById()
2.实现定时器（用定时器使index变换，使图片浮现）
3.实现圆点点击（给id命为数字方法，但只能用一次id只能有一个）
4.实现><点击（给index自增或自减）
5.实现菜单浮现（用setAttribute，getAttribute），对className，dispaly,background运用
代码 分为html ，css ，js
html部分：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div class="main" id="main"><div class="sub-menu hide" id="sub-menu"><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="mr10 ml10">/</span><a href="#">手机储存卡</a><span class="mr10 ml10">/</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="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="mr10 ml10">/</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="mr10 ml10">/</span><a href="#">收音机</a><span class="mr10 ml10">/</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="menu-content"><div class="menu-item"><a href="#"><span>手机 、配件</span><i class="iconfont"></i></a></div><div class="menu-item"><a href="#"><span>电脑</span><i class="iconfont"></i></a></div><div class="menu-item"><a href="#"><span>家用电器</span><i class="iconfont"></i></a></div><div class="menu-item"><a href="#"><span>家具</span><i class="iconfont"></i></a></div></div><!-- 图片轮播 --><div class="banner" id="banner"><a href="#"><div class="banner-slide slide1 slide-active"></div></a><a href="#"><div class="banner-slide slide2"></div></a><a href="#"><div class="banner-slide slide3"></div></a></div><!-- 上一张，下一张按钮 --><a href="javascript:void(0)" class="button prev" id="prev"></a><a href="JavaScript:void(0)" class="button next" id="next"></a><!-- 远点导航 --><div class="dot" id="dot"><span class="active"></span><span></span><span></span></div></div>
</body>
<script src="js/carousel.js"></script>
</html>
Css部分：
*{margin: 0px;padding: 0px;
}
ul{list-style: none;
}
a{text-decoration: none;color: black;
}
@font-face {font-family: 'iconfont';src: url('../img/font/iconfont.eot');src: url('../img/font/iconfont.eot?#iefix') 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');
}
body{font-family: "微软雅黑";color: #14191E;
}
.main{width: 1200px;height: 460px;margin: 40px auto;overflow: hidden;position: relative;
}
.banner{width: 1200px;height: 460px;position: relative;
}
.banner .banner-slide{width: 1200px;height: 460px;background-repeat: no-repeat;position: absolute;display: none;
}
.banner .slide-active{display: block;
}
.banner .slide1{background-image: url(../img/bg1.jpg);
}
.banner .slide2{background-image: url(../img/bg2.jpg);
}
.banner .slide3{background-image: url(../img/bg3.jpg);
}
.main .button{width: 40px;height: 80px;background-color: black;position: absolute;left: 244px;top: 50%;margin-top: -40px;background: url(../img/arrow.png) no-repeat center center;
}
.button:hover{background-color: #000000;opacity: 0.8;filter:alpha(opacity=80);
}
.main .prev{transform: rotate(180deg);
}
.main .next{left: auto;right: 0;
}
.main .dot{position: absolute;right: 10px;bottom: 24px;}
.main .dot span{width: 12px;height: 12px;border-radius: 50%;background-color: rgba(7,17,27,0.4);box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;display: inline-block;margin-left: 8px;cursor: pointer;
}
.main .dot .active{box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;background: #FFFFFF;
}
.main .menu-box{width: 244px;height: 460px;position: absolute;left: 0;top: 0;background: rgb(7,17,27,0.5);opacity: 0.5;z-index: 1;
}
.main .menu-content{width: 244px;height: 454px;position: absolute;left: 0;top: 0;padding-top: 6px;z-index: 2;background: rgba(192,196,200,0.5);
}
.menu-item{height:64px;line-height: 66px;font-size: 16px;padding: 0 24px;position: relative;
}
.menu-item a:link,.menu-item a:visited{color: white;
}
.menu-item a{display: block;border-bottom: 1px solid rgba(255,255,255,0.2);padding: 0 8px;height: 63px;
}.menu-item i{position: absolute;right: 32px;font-size: 24px;top: 2px;font-family:"iconfont";font-style: normal;font-weight: normal;color: rgba(255,255,255,0.5);
}
.sub-menu{width: 730px;height: 458px;border: 1px solid #d9dde1;background: white;position: absolute;left: 244px;top: 0;z-index: 999;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
}
.inner-box{width: 100%;height: 100%;background: url(../img/fe.png) no-repeat;display: none;
}
.sub-inner-box{width: 652px;margin-left: 40px;overflow: hidden;
}
.title{color: #f01414;font-size: 16px;margin: 28px 0 30px 0;font-weight: bold;
}
.sub-row{margin-top: 25px;
}
.sub-row .bold{font-weight: bold;
}
.sub-row .mr10{margin-right: 10px;
}
.sub-row .ml10{margin-left: 10px;
}
.hide{display: none;
}
Js部分：
//封装getElementById()
function ById(id){return typeof(id)==="string"?document.getElementById(id):id;
}
main=ById(main);
banner=ById(banner);
pics=banner.getElementsByTagName("div");
dot=ById(dot).getElementsByTagName("span");
timer=null;
index=0;
len=pics.length;
menu=ById("menu-content");
item=menu.getElementsByClassName("menu-item");
sub=ById("sub-menu");
inner=sub.getElementsByClassName("inner-box");function img(){//菜单显示for(j=0;j<item.length;j++){item[j].setAttribute("data-index",j);item[j].onmouseover=function(){dix=this.getAttribute("data-index");console.log(dix);sub.className="sub-menu";for(i=0;i<item.length;i++){item[i].style.background="none";inner[i].style.display="none";}this.style.background="rgba(0,0,0,0.1)";inner[dix].style.display="block";}}//菜单消失menu.onmouseout=function(){sub.className="sub-menu hide";for(i=0;i<item.length;i++){item[i].style.background="none";}}//移动到二级菜单时不会消失sub.onmouseover=function(){sub.className="sub-menu";}//鼠标不在二级菜单时消失sub.onmouseout=function(){sub.className="sub-menu hide";}//清除定时器main.onmouseover=function(){if(timer) clearInterval(timer);}//不在main范围时，自动轮播main.onmouseout=function(){timer=setInterval(function(){for(i=0;i<pics.length;i++){index++;if(index>=len) index=0;changeImg(index);}}, 2000);}main.onmouseout();//圆点点击for(i=0;i<len;i++){dot[i].id=i;dot[i].onclick=function(){index=this.id;changeImg(index);}}//点击<prev=ById(prev);prev.onclick=function(){index--;if(index<0) index=len-1;changeImg(index);}//点击>next=ById(next)next.onclick=function(){index++;if(index>=len) index=0;changeImg(index);}//鼠标移动菜单浮现}
function changeImg(index){for(i=0;i<len;i++){pics[i].style.display='none';dot[i].className="";}pics[index].style.display='block';dot[index].className="active";
}
img();
