菜单区域实现
划过主菜单显示子菜单
轮播区域实现
1、点击图片中左右箭头，分别跳转上一张与下一张
（1）点击上一张图其实就是让一个变量进行递减，点击下一张图就是让变量递增；（控制索引最大最小值）
2、点击右下角小圆也可以进行图片的跳转
（1）通过索引让变量进行随意的修改
3、每间隔3s进行轮播图的自动切换，鼠标放在图片上清除自动切换
（1）定时器
4、鼠标放在主菜单上显示子菜单，离开子菜单消失。
放在子菜单上显示子菜单，离开消失。
源代码：
html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>轮播图</title><link rel="stylesheet" type="text/css" href="css/style.css"/><script type="text/javascript" src="js/script.js"></script></head><body><div class="main" id="main"><!-- 主菜单背景 --><div class="menu-box"></div><!-- 主菜单 --><div class="menu-content" id="menu-content"><div class="menu-item"><a href=""><span>手机、配件</span><i class="icon"></i></a></div><div class="menu-item"><a href=""><span>电脑</span><i class="icon"></i></a></div><div class="menu-item"><a href=""><span>家用电器</span><i class="icon"></i></a></div><div class="menu-item"><a href=""><span>家具</span><i class="icon"></i></a></div></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><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="banner" id="banner"><!-- 鼠标悬停停止自动轮播的区域 --><section class="cease" id="cease"></section><a href=""><div class="banner-slide slide1"></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></body></html>
css
*{margin: 0;padding: 0;}/*通配符选择器，外边距，内边距为0*/body{font-family: "微软雅黑";color: #14191e;}/*字体，字体颜色*/@font-face{font-family: 'iconfont';/*自定义名称，要有意义，不准数字*/src: url('../font/iconfont.eot');/*兼容ie9以上版本*/src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),/*兼容ie6-8版本*/url('../font/iconfont.ttf') format('truetype'),/*主要针对手机端浏览器 safari android ios*/url('../font/iconfont.woff') format('woff'),/*兼容所有浏览器 */url('../font/iconfont.svg#iconfont') format('svg');/*针对ios端开发 legacy ios*//*font-weight: bold;<字体加粗>font-style: normal;默认的正常显示*/}/*获取下载的字体*/a{text-decoration: none;}/*没有下划线*/a:link,a:visited{color: #5e5e5e;}/*联合选择器，未访问连接时与已经访问链接时的字体颜色*/.main{width: 1200px;height: 460px;margin: 30px auto;overflow: hidden;position: relative;}/*最大框架：宽；高；外边距，上下30px，左右居中；溢出的部分隐藏；相对定位*/.banner{width: 1200px;height: 460px;overflow: hidden;cursor: pointer;}/*焦点图：宽；高；溢出的部分隐藏；小手标志*/.banner-slide{width: 1200px;height: 460px;float: right;background-repeat: no-repeat;display: none;}/*三个图片：宽；高；右浮动，背景不重复;全部隐藏*/.slide1{background-image: url(../img/bg1.jpg);display: block;}/*第一个图片;块级元素显示*/.slide2{background-image: url(../img/bg2.jpg);}/*第二个图片*/.slide3{background-image: url(../img/bg3.jpg);}/*第三个图片*/.button{position: absolute;width: 40px;height: 80px;right: 0;background: url(../img/arrow.png) center center no-repeat;top: 50%;margin-top: -40px;}/*左右两个按钮；宽；高；相对main绝对定位，距右0，距上50%；背景图片，水平垂直居中，不重复；外上边距-40px；*/.button:hover{background-color: #333;opacity: 0.8;filter: alpha(opacity=80);}/*鼠标悬浮在上面时状态：背景颜色，透明度。照顾IE浏览器*/.prev{left: 244px;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}/*左按钮相对上面：靠左244px，定位左的优先级高于右；旋转180度*/.dots{position: absolute;right: 24px;bottom: 24px;line-height: 12px;}/*下面三个选择圆：相对main绝对定位，距右，距下，行间距12px；*/.dots span{display: inline-block;width: 12px;height: 12px;border-radius: 50%;background-color: rgba(7,17,27,.4);margin-left: 8px;box-shadow: 0 0 0 2px rgba(255,255,255,.8) inset;cursor: pointer;}/*子孙后代选择器：转换为块级元素并列一排；宽；高；削圆；背景颜色；外左边距，让他们之间有距离；盒子阴影，水平偏移量，垂直偏移量，模糊度，扩展多少，颜色模糊度，内阴影;小手标志*/.dots .active{background-color: #fff;box-shadow: 0 0 0 2px rgba(255,255,255,.4) inset;}/*背景颜色，同上*/.menu-box{position: absolute;left: 0;top: 0;width: 244px;height: 460px;background: rgba(7,17,27,.3);z-index: 1;}/*主菜单背景，相对main绝对定位，左上偏移；宽；高；背景颜色模糊度；层叠模式数字大的在上面显示*/.menu-content{position: absolute;left: 0;top: 0;width: 244px;height: 460px;z-index: 2;}/*主菜单（因为菜单不需要模糊度所以单独拿出来设置css样式）*/.menu-item{height: 64px;line-height: 66px;cursor: pointer;padding: 0 24px;}/*主菜单的每个标题，宽；行间距；因为是链接，浮在上面显示小手标志；内边距，上下0，左右24px；下划线两边留空*/.menu-item a{display: block;color: #fff;font-size: 16px;border-bottom: 1px solid rgba(255,255,255,.2);height: 63px;position: relative;}/*转换为块级元素；字体颜色；字体大小；下边框，粗细，实线，颜色透明度；高；相对定位*/.menu-item:last-child a{border-bottom:none;}/*menu-item的最后一个元素a；没有下边框*/.menu-item i{position: absolute;right: 12px;top: 2px;color: rgba(255,255,255,.5);font-style: normal;font-weight: normal;font-family: "iconfont";font-size: 24px;}/*子孙后代选择器：相对a绝对定位；右下偏移；字体颜色模糊度；没有斜体；没有加粗；字体；字体大小*/.sub-menu{width: 730px;height: 458px;position: absolute;left: 244px;top: 0;background: #fff;z-index: 50;border: 1px solid #d9dde1;box-shadow: 0 4px 8px 0px rgba(0,0,0,.1);}/*子菜单：宽；高；相对main绝对定位，左上偏移；背景颜色；层叠模式数字大的在上面显示；边框；盒子阴影*/.inner-box{width: 100%;height: 100%;background: url(../img/fe.png);display: none;}/*子菜单背景：宽；高；背景图片;全部隐藏*/.sub-inner-box{width: 652px;margin-left: 40px;overflow: hidden;}/*子菜单内容；宽；外左边距；溢出的内容隐藏*/.title{font-size: 16px;color: #f01414;line-height: 16px;font-weight: bold;margin: 28px 0 30px 0;}/*子菜单内容的标题：字体大小；颜色；行高；粗体；外边距*/.sub-row{margin-bottom: 25px;}/*子菜单内容：外下边距让他们之间有距离*/.bold{font-weight: bold;}/*子标题：字体加粗*/.ml10{margin-left: 10px;}/*内容和斜杠之间的左边距离*/.mr10{margin-right: 10px;}/*内容、子标题和斜杠之间的右边距离*/.hide{display: none;}/*隐藏子菜单*/
js
// 声明全局变量window.onload=function(){var index = 0,//当前显示图片的索引，默认值为0timer = null, //定时器cease = byId("cease"),//鼠标悬停停止自动轮播的区域prev = byId("prev"),//上一张next = byId("next"),//下一张banner = byId("banner"),//焦点图的爷爷pics = banner.getElementsByTagName('div'),//焦点图dots = byId("dots").getElementsByTagName('span'),//圆点menuContent = byId("menu-content"),//主菜单menuItems = menuContent.getElementsByClassName("menu-item"),//主菜单的标题subMenu = byId("sub-menu"),//子菜单innerBox = subMenu.getElementsByClassName("inner-box"),//子菜单的标题mlen = menuItems.length,size = pics.length,llen = innerBox.length;// console.log(size);console.log(lis_1[0]);lis_1[0].onclick = function(){department.className = 'hide'hospital.className = 'hospital'lis_1[0].className = 'li_1'}lis_1[1].onclick = function(){department.className = ''hospital.className = 'hospital hide'lis_1[1].className = 'li_1'}//封装getElementById（）三元运算符function byId(id){return typeof(id) === "string" ? document.getElementById(id):id;}/*封装通用事件绑定方法；element绑定事件的DOM元素事件名事件处理程序*/function addHandler(element,type,handler){//针对非IE浏览器if (element,addEventListener) {element.addEventListener(type,handler,true);} //IE浏览器支持DOM2级else if (element,attachEvent) {element.attachEvent('on' + type,handler);}//IE浏览器不支持DOM2级，使用DOM0级else{element['on' + type] = handler;//变量不可以.type，事件可以.；}}//封装函数，切换图片function changImg(){//遍历所有图片，将图片隐藏，将圆点上的类清除for(var i=0;i<size;i++){pics[i].style.display = 'none';dots[i].className = "";}//显示当前图片pics[index].style.display = 'block';//当前圆点高亮显示dots[index].className = "active";}// 点击下一张按钮显示下一张图片addHandler(next,"click",function(){index++;if (index>=size) index = 0;changImg();});// 点击上一张按钮显示上一张图片addHandler(prev,"click",function(){index--;if (index<0) index = size-1;changImg();});//点击圆点索引切换图片for(var j=0;j<size;j++){dots[j].setAttribute('tid',j);addHandler(dots[j],'click',function(){//自定义属性不可以直接点，需用getAttributeindex = this.getAttribute('tid');changImg();})}//定时器,开启自动轮播function startAutoPlay(){timer = setInterval(function(){index++;if (index>=size) index = 0;changImg();},3000)}//清除定时器，停止自动轮播function ceaseAutoPlay(){if(timer){clearInterval(timer);}}//封装函数，取消所有主菜单背景function bgNone(){for(var n=0;n<mlen;n++){menuItems[n].style.background = 'none';}}//封装函数，子菜单和主菜单背景显示function menuItemsBg(){//显示子菜单所在的背景subMenu.className = "sub-menu";//获取当前主菜单的索引index = this.getAttribute('data-index');//遍历所有的子菜单innerbox，将它们隐藏for(var l=0;l<llen;l++){//隐藏所有的子菜单innerBox[l].style.display = "none";//所有主菜单取消背景menuItems[l].style.background = 'none';}//找到当前子菜单，让其显示出来innerBox[index].style.display = "block";//当前主菜单显示背景menuItems[index].style.background = 'rgba(0,0,0,.1)';}//鼠标滑过主菜单和子菜单for(var k=0;k<mlen;k++){//给所有主菜单定义属性，表明它的索引menuItems[k].setAttribute('data-index',k);//给所有子菜单定义属性，表明它的索引innerBox[k].setAttribute('data-index',k);addHandler(menuItems[k],"mouseover",menuItemsBg)addHandler(innerBox[k],"mouseover",menuItemsBg)}//鼠标滑入子菜单，显示子菜单addHandler(subMenu,"mouseover",function(){subMenu.className = "sub-menu";})//鼠标离开主菜单，隐藏子菜单addHandler(menuContent,"mouseout",function(){subMenu.className = "sub-menu hide";bgNone();})//鼠标离开子菜单，隐藏子菜单addHandler(subMenu,"mouseout",function(){subMenu.className = "sub-menu hide";bgNone();})//鼠标滑入cease，停止轮播addHandler(cease,"mouseover",ceaseAutoPlay);//鼠标离开cease，继续轮播addHandler(cease,"mouseout",startAutoPlay);//自动开启轮播startAutoPlay();}
