day21(其实花了不止一天）
项目分为三个部分：
html（内容）
css（样式）
javascript（动作）
项目主要分成两个部分，一是实现轮播图，二是实现主菜单的编写
第一部分：
1.轮播图的按时自动轮播
2.圆点按钮的点击和随着图片轮播按钮的变换
3.方块按钮的点击
第二部分：
1.鼠标划过主菜单，出现子菜单
2.鼠标移除主菜单，子菜单消失
项目代码：
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>综合案例</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="main" id="main"> <!-- 主菜单盒子 --> <div class="menu-box"></div> <!-- 子菜单 --> <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="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 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> </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><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="banner-slide slide1 slide-action"></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="dots" id="dots"> <span class="active"></span> <span></span> <span></span> </div> </div> <script src="js/script.js"></script> </body> </html>
style.css:
*{ margin: 0; padding: 0; } a{ text-decoration: none; color: #666; } @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.tff") format("truetype"), url("../img/font/iconfont.svg#iconfog") format("svg"); } body{ font-family: "微软雅黑"; list-style: none; } .main{ width: 1200px; height: 460px; margin: 0 auto; position: relative; } .banner{ width: 1200px; height: 460px; margin: 30px auto; position: relative; overflow: hidden; } .banner-slide{ width: 1200px; height: 460px; position: absolute; background-repeat: no-repeat; display: none; } .slide-action{ display: block; } .slide1{ background-image: url("../img/bg1.jpg"); } .slide2{ background-image: url("../img/bg2.jpg"); } .slide3{ background-image: url("../img/bg3.jpg"); } .button{ width: 40px; height: 80px; position: absolute; left: 244px; top: 50%; margin-top: -40px; background: url("../img/arrow.png") no-repeat center center; } .button:hover{ background-color: #333; opacity: 0.7; filter: alpha(opacity-0.5); } .prev{ transform: rotate(180deg); } .next{ left: auto; right: 0px; } .dots{ position: absolute; right: 30px; bottom: 24px; text-align: right; } .dots span{ display: inline-block; width: 12px; height: 12px; line-height: 12px; border-radius: 50%; margin-left: 8px; background: rgba(7,17,27,0.4); box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset; cursor: pointer; } .dots span.active{ box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset; background: #fff; } .menu-box{ width: 244px; height: 460px; position: absolute; left: 0; top: 0; background: rgba(7,17,27,0.5); opacity: 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; position: relative; } .menu-item a:link, .menu-item a:visited{ color: #fff; } .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 #d9ddc1; background: #fff; position: absolute; left: 244px; top: 0px; z-index: 999; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1); overflow: hidden; } .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; } .sub-row{ margin-top: 25px; } .title{ color: #f01414; margin-top: 25px; font-weight: bold; line-height: 16px; } .bold{ font-weight: bold; } .mr10{ margin-right: 10px; } .ml10{ margin-left: 10px; } .hide{ display: none; }
script.js
function byId(id) { return typeof id === 'string' ? document.getElementById(id) : id; //包装document.getElementById(id) } var index = 0, timer = null, pics = byId("banner").getElementsByTagName('div'), dots = byId("dots").getElementsByTagName('span'), prev = byId("prev"), next = byId("next"), len = pics.length, menu = byId("menu-content"), menuItem = menu.getElementsByClassName("menu-item"), subMenu = byId('sub-menu'), innerBox = subMenu.getElementsByClassName("inner-box"); function slideImg() { var main = byId("main"); main.onmouseout = function () { timer = setInterval(function () { index++; if (index >= len) { index = 0; } changeImg(); },2000); } main.onmouseover = function () { if (timer) clearInterval(timer); } main.onmouseout(); // 圆点点击 for (var d = 0; d < len; d++) { dots[d].id =d; dots[d].onclick = function () { index = this.id; changeImg(); } } //方块按钮prev prev.onclick = function () { index--; if (index < 0) { index = len-1; } changeImg(); } //方块按钮next next.onclick = function () { index++; if (index >= len) { index = 0; } changeImg(); } } //导航菜单 for (var i = 0; i < menuItem.length; i++) { menuItem[i].setAttribute("data-index",i); menuItem[i].onmouseover = function () { /*问题： console.log(i); console.log(innerBox[i]);*/ subMenu.className = "sub-menu"; var index = this.getAttribute("data-index"); innerBox[index].style.display = "block"; }; menuItem[i].onmouseout = function () { subMenu.className = "sub-menu hide"; var index = this.getAttribute("data-index"); innerBox[index].style.display = "none"; } } function changeImg() { for (var i = 0; i < pics.length; i++) { pics[i].style.display = "none"; dots[i].className = ""; } pics[index].style.display = "block"; dots[index].className = "active"; } slideImg();
图示：
项目源码下载：
https://files.cnblogs.com/files/shink1117/JavaScript%E5%AE%9E%E7%8E%B0%E8%BD%AE%E6%92%AD%E7%89%B9%E6%95%88.zip