这周要求做个商城的轮播图，老师说在拿到项目的时候不要急急忙忙写代码，先要想好要具体做那些内容，项目的整体页面是这样的 从这个页面上来看，主要分为下面几点：
左侧为主菜单中间为焦点图左右箭头右下角小圆点二级菜单从JavaScript角度来讲：
点击上图得左右箭头，分别跳转上一图和下一图 点击上一张图其实就是让一个变量进行递增，点击下一张图就是让变量递减
点击右下角小圆点也可以进行图片得轮播 通过索引让变量进行随意得修改
每间隔2s进行轮播图得自动切换 定时器；
Typeof id 或者 typeof(id)
html事件：在标签里面写 绑定在页面里面的 DOM0级事件：只能给一个元素的某一个行为绑定一次方法 第二次绑定的话会将前面的覆盖 DOM2级事件：可以给某一个元素的同一个行为绑定多个不同的方法
DOM2级事件里有监听方法： addEventListener()和removeEventListener() ——非ie浏览器(chrome firefox opera safari ie9+) addEventListener()可以为元素添加多个事件处理程序，触发的时候按照添加顺序依次进行调用； removeEventListener()移除事件处理程序，不能移除匿名添加的函数 参数：第一个参数是事件名 第二个参数是事件处理程序函数 第三个参数是布尔值(true表示在捕获阶段调用 从上往下 false表示在冒泡阶段调用 从下往上 )
ie6~8版本 监听方法： attachEvent()和detachEvent() attachEvent()可以为元素添加多个事件处理程序，触发的时候按照添加顺序依次执行 detachEvent()移除事件处理程序 不能移除匿名添加的函数 参数：第一个参数是事件名 第二个参数是事件处理程序函数
那么对于现在仅学的内容来说，要通过HTML,CSS3,JavaScript，来分别设置各自的内容。
整个整个HTML里包含的内容已经笼统的都完成了。
附上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商城轮播图</title> <link rel="stylesheet" type="text/css" href="css/demo1.css"> </head> <body> <!-- 用一个大的div包裹菜单栏和轮播图片 --> <div class="main" id="main"> <!-- 整体菜单盒子 --> <div class="menu-box"></div> <!-- 子菜单 --> <div class="sub-menu hide" id="sub-menu"> <div class="inner-box"> <!-- 定义一个sub的div框 --> <div class="sub-inner-box"> <!-- 定义每个大标题 --> <div class="title">手机、配件</div> <!-- 定义大标题下每个内容 --> <div class="sub-row"> <span class="jc mr">手机通讯：</span> <a href="#">手机</a> <span class="ml mr">/</span> <a href="#">手机维修</a> <span class="ml mr">/</span> <a href="#">以旧换新</a> </div> <div class="sub-row"> <span class="jc mr">手机配件：</span> <a href="#">手机壳</a> <span class="ml mr">/</span> <a href="#">手机存储卡</a> <span class="ml mr">/</span> <a href="#">数据线</a> <span class="ml mr">/</span> <a href="#">充电器</a> <span class="ml mr">/</span> <a href="#">电池</a> </div> <div class="sub-row"> <span class="jc mr">运营商：</span> <a href="#">中国联通</a> <span class="ml mr">/</span> <a href="#">中国移动</a> <span class="ml mr">/</span> <a href="#">中国电信</a> </div> <div class="sub-row"> <span class="jc mr">智能设备：</span> <a href="#">智能手环</a> <span class="ml mr">/</span> <a href="#">智能家居</a> <span class="ml mr">/</span> <a href="#">智能手表</a> <span class="ml mr">/</span> <a href="#">其他配件</a> </div> <div class="sub-row"> <span class="jc mr">娱乐：</span> <a href="#">耳机</a> <span class="ml mr">/</span> <a href="#">音响</a> <span class="ml mr">/</span> <a href="#">收音机</a> <span class="ml mr">/</span> <a href="#">麦克风</a> </div> </div> </div> <div class="inner-box"> <!-- 定义一个sub的div框 --> <div class="sub-inner-box" id="sub2"> <!-- 定义每个大标题 --> <div class="title">电脑</div> <!-- 定义大标题下每个内容 --> <div class="sub-row"> <span class="jc mr">电脑：</span> <a href="#">笔记本</a> <span class="ml mr">/</span> <a href="#">平板</a> <span class="ml mr">/</span> <a href="#">一体机</a> </div> <div class="sub-row"> <span class="jc mr">电脑配件：</span> <a href="#">显示器</a> <span class="ml mr">/</span> <a href="#">CPU</a> <span class="ml mr">/</span> <a href="#">主板</a> <span class="ml mr">/</span> <a href="#">硬盘</a> <span class="ml mr">/</span> <a href="#">电源</a> <span class="ml mr">/</span> <a href="#">显卡</a> <span class="ml mr">/</span> <a href="#">其他配件</a> </div> <div class="sub-row"> <span class="jc mr">游戏设备：</span> <a href="#">游戏机</a> <span class="ml mr">/</span> <a href="#">耳机</a> <span class="ml mr">/</span> <a href="#">游戏软件</a> </div> <div class="sub-row"> <span class="jc mr">网络产品：</span> <a href="#">路由器</a> <span class="ml mr">/</span> <a href="#">网络机顶盒</a> <span class="ml mr">/</span> <a href="#">交换机</a> <span class="ml mr">/</span> <a href="#">存储卡</a> <span class="ml mr">/</span> <a href="#">网卡</a> </div> <div class="sub-row"> <span class="jc mr">外部产品：</span> <a href="#">鼠标</a> <span class="ml mr">/</span> <a href="#">键盘</a> <span class="ml mr">/</span> <a href="#">U盘</a> <span class="ml mr">/</span> <a href="#">移动硬盘</a> <span class="ml mr">/</span> <a href="#">鼠标垫</a> <span class="ml mr">/</span> <a href="#">电脑清洗</a> </div> </div> </div> <div class="inner-box"> <!-- 定义一个sub的div框 --> <div class="sub-inner-box" id="sub3"> <!-- 定义每个大标题 --> <div class="title">家用电器</div> <!-- 定义大标题下每个内容 --> <div class="sub-row"> <span class="jc mr">电视：</span> <a href="#">国产品牌</a> <span class="ml mr">/</span> <a href="#">韩国品牌</a> <span class="ml mr">/</span> <a href="#">欧美品牌</a> </div> <div class="sub-row"> <span class="jc mr">空调：</span> <a href="#">显示器</a> <span class="ml mr">/</span> <a href="#">柜式</a> <span class="ml mr">/</span> <a href="#">中央</a> <span class="ml mr">/</span> <a href="#">壁挂式</a> </div> <div class="sub-row"> <span class="jc mr">冰箱：</span> <a href="#">多开门</a> <span class="ml mr">/</span> <a href="#">对开门</a> <span class="ml mr">/</span> <a href="#">三门</a> <span class="ml mr">/</span> <a href="#">双门</a> </div> <div class="sub-row"> <span class="jc mr">洗衣机：</span> <a href="#">滚筒式洗衣机</a> <span class="ml mr">/</span> <a href="#">迷你洗衣机</a> <span class="ml mr">/</span> <a href="#">洗烘一体机</a> </div> <div class="sub-row"> <span class="jc mr">厨房电器：</span> <a href="#">油烟机</a> <span class="ml mr">/</span> <a href="#">洗碗机</a> <span class="ml mr">/</span> <a href="#">燃气灶</a> </div> </div> </div> <div class="inner-box"> <!-- 定义一个sub的div框 --> <div class="sub-inner-box"> <!-- 定义每个大标题 --> <div class="title">家具</div> <!-- 定义大标题下每个内容 --> <div class="sub-row"> <span class="jc mr">家纺：</span> <a href="#">被子</a> <span class="ml mr">/</span> <a href="#">枕头</a> <span class="ml mr">/</span> <a href="#">四件套</a> <span class="ml mr">/</span> <a href="#">床垫</a> </div> <div class="sub-row"> <span class="jc mr">灯具：</span> <a href="#">台灯</a> <span class="ml mr">/</span> <a href="#">顶灯</a> <span class="ml mr">/</span> <a href="#">节能灯</a> <span class="ml mr">/</span> <a href="#">应急灯</a> </div> <div class="sub-row"> <span class="jc mr">厨具：</span> <a href="#">烹饪锅具</a> <span class="ml mr">/</span> <a href="#">餐具</a> <span class="ml mr">/</span> <a href="#">菜板刀具</a> </div> <div class="sub-row"> <span class="jc mr">家装：</span> <a href="#">地毯</a> <span class="ml mr">/</span> <a href="#">沙发垫套</a> <span class="ml mr">/</span> <a href="#">装饰字画</a> <span class="ml mr">/</span> <a href="#">照片墙</a> <span class="ml mr">/</span> <a href="#">窗帘</a> </div> <div class="sub-row"> <span class="jc mr">生活用品：</span> <a href="#">收纳用品</a> <span class="ml mr">/</span> <a href="#">浴室用品</a> <span class="ml mr">/</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="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="banner" id="banner"> <a href="#"> <!-- 可以设置多个class属性 --> <div class="banner1 slide1 slide-active"></div> </a> <a href="#"> <div class="banner1 slide2"></div> </a> <a href="#"> <div class="banner1 slide3"></div> </a> </div> <!-- 箭头设置 箭头有超链接功能 --> <!-- 除了#还可以写javascript:void(0)也代表当前页面跳转空链接 --> <a href="#" class="button fris" id="fris"></a> <a href="#" class="button next" id="next"></a> <!-- 小圆点设置 --> <div class="dots" id="dots"> <span class="active"></span> <span></span> <span></span> </div> </div> </body> <script type="text/javascript" src="js/demo1.js"></script> </html>在CSS3设置的时候要注意不要出现单词拼错、漏写或者标点符号中英文问题导致代码不能运行/报错！ 首先我们要进行全局定义，用通配符*去设置margin和padding均为0，再对boby设置字体和颜色 接下来我们要设置我们整个项目的样式：
大的div设置宽高，相对定位（遵循父相子绝原理），并且对于溢出部分进行隐藏；轮播图设置宽高，背景图片不重复，设置隐藏（为js设置做准备），再分别插入图片，对第一张图片单独进行显示操作；箭头设置绝对定位，添加图片箭头，再单独设置另个箭头 使其一个向左一个向右（用到旋转）设置悬停时有背景颜色；小圆点设置绝对定位，设置display:inline-block可以使三个小圆点span处于同一水平线，设置border-radius:50%才能让它成为一个圆，再单独对第一个小圆点设置高亮；主菜单设置绝对定位，在设置z-index:2让它在轮播图上方，由于我们的主菜单是放在超链接a标签内，所以会自带下划线，我们需要设置text-decoration:none来去掉下划线；主菜单下的每一项设置属性，设置cursor:pointer是使鼠标成为小手标志，设置border-bottom:1px solid rgba(255,255,255,.2)是为了让下划线不填充整个框，看起来更美观一些，由于我们“家具”下面没有其他内容，所以我们要将家具下面的下划线去掉则要设置一个border-bottom:none；对于主菜单旁边的小箭头进行设置绝对定位（i标签是行内元素 设置position是为了成块状元素），这里我们运用的是代码，一开始会显示一个小方块，进行设置后则会显示为箭头；字体设置的整体代码要记得！子菜单设置绝对定位，这里也要设置一个z-index:10使其在上方，子菜单也设置一个display:none，为后期js设置做准备整个大框设置，同样也是设置一个overflow:hidden超出部分隐藏；对每个标题设置属性 再对每行进行样式设置；最后对整个子菜单进行一个隐藏； 以上是所有CSS3设置代码：
/*全局定义*/ *{ margin:0; padding:0; } body{ font-family:"微软雅黑"; color:#14191e; } /*大的div设置*/ .main{ width:1200px; height:460px; margin:30px auto; /*溢出部分进行隐藏*/ overflow:hidden; /*父相*/ position:relative; } /*轮播图设置*/ .banner { width:1200px; height:460px; } .banner1{ width:1200px; height:460px; /*处于水平线*/ float:left; background-repeat: no-repeat; /*先将图片隐藏*/ display:none; } /*单独对第一张图片先操作*/ .slide-active{ display:block; } /*分别插入图片*/ .slide1{ background-image: url(../img/bg1.jpg); } .slide2{ background-image: url(../img/bg2.jpg); } .slide3{ background-image: url(../img/bg3.jpg); } /*设置绝对定位*/ /*箭头设置*/ .button{ /*子绝*/ position: absolute; width:40px; height:80px; left:244px; top:50%; background:url(../img/arrow.png) center center no-repeat; margin-top:-40px; transform:rotate(180deg); } /*箭头划过时有背景*/ .button:hover{ background-color:#333; /*设置透明度*/ opacity:.8; /*兼容其他浏览器设置透明度*/ filter:alpha(opacity=80); } /*单独操作右边的箭头*/ .next{ left:auto; right:0; transform:rotate(0deg); } /*小圆点设置*/ .dots{ position: absolute; right:24px; /*底部设置*/ bottom:24px; line-height:12px; } .dots span{ /*使三个小圆点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 span.active{ background-color:#fff; box-shadow: 0 0 0 2px rgba(7,17,27,.4) inset; } /*主菜单样式设置*/ .menu-box{ position:absolute; left:0; top:0; width:244px; height:460px; background:rgba(7,17,27,.3); } /*主菜单内容设置*/ .menu-content{ position:absolute; left:0; top:0; width:244px; height:460px; z-index:2; } a{ /*去掉下划线*/ text-decoration:none; } /*未访问和已访问*/ a:link,a:visited{ color:#5e5e5e; } /*主菜单下每项设置*/ .menu-item{ height:64px; line-height:66px; cursor:pointer; padding:0 24px; } .menu-item a{ display:block; color:#fff; font-size:16px; height:60px; /*这样设置可以让下划线不填充整个框*/ border-bottom:1px solid rgba(255,255,255,.2); padding:0 10px; position:relative; } /*最后一个家具下面的线去掉*/ .menu-item:last-child>a{ border-bottom:none; } .menu-item i{ /*i标签是行内元素 设置position是为了成块状元素*/ position:absolute; right:32px; top:2px; color:rgba(255,255,255,.5); font-style:normal; font-weight:normal; font-family:"iconfont"; font-size:24px; } /*字体设置*/ @font-face{ font-family:'iconfont'; src:url('../img/font/iconfont.eot'); src:url('../img/font/iconfont.eot') format('embedded-opentype'), url('../img/font/iconfont.svg#iconfont') format('svg'), url('../img/font/iconfont.ttf') format('truetype'), url('../img/font/iconfont.woff') format('woff'); } /*子菜单设置*/ .sub-menu{ width:730px; height:458px; position:absolute; left:244px; top:0; background:#fff; z-index:10; border:1px solid #d9dde1; /*水平 垂直 模糊距离 尺寸 颜色*/ box-shadow:0 4px 8px 0px rgba(0,0,0,.1); } /*设置子菜单*/ .inner-box{ width:100%; height:100%; background:url("../img/fe.png") no-repeat; /*先设置隐藏 为后期js设置做准备*/ display:none; } /*整个大框设置*/ .sub-inner-box{ width:650px; 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; } .jc{ font-weight:bold; } .mr{ margin-right:10px; } .ml{ margin-left:10px; } .hide{ display:none; }JS部分对于我个人来说比较薄弱，总是分不清什么时候该用循环，什么时候该遍历，一些函数公式格式记不住，之后要多去看资料和上课笔记。 对于JS部分来说，主要是使整个页面“动”起来，那么设置的时候也不用着急 一步步来，有些冗余的东西要想办法把它合并，一些类似操作比如获取id或者标签名之类的 可以归类在一块儿，看了老师发的讲解视频后，学到了新的东西，在之前学习的时候 总要写一堆比如xxx=xxxx.getElementById("")，看起来代码很长，码起来也很麻烦，所以有个新学到的知识是封装getElementById()属性，同样的还学到了封装通用事件的绑定方法（DOM2级事件）； 这个项目中运用到js部分的主要分为：
左右箭头分别跳转上一张图和下一张图点击右下角的小圆点也可以进行图片的轮播图片自动轮播 外加鼠标滑动时图片停止轮播 鼠标移除时图片继续轮播鼠标滑动到一级菜单时会展现对应的二级菜单代码：
//声明全局变量 var index = 0,//当前显示图片索引 默认值为0 timer=null,//定时器 main=byId("main"), fris=byId("fris"),//上一张 next=byId("next"),//下一张 // 获得banner下所有的div 根据标签名字 pics=byId("banner").getElementsByTagName("div");//重点 dots=byId("dots").getElementsByTagName("span"); banner=byId("banner"); menuContent=byId("menu-content"); menuItems=menuContent.getElementsByClassName("menu-item"); subMenu=byId("sub-menu"); innerBox=subMenu.getElementsByClassName("inner-box"); size=pics.length; //封装getElementById() function byId(id){ // 判断类型typeof id 或者typeof(id) //两个== 用于一般比较 在比较的时候可以转换数据类型 //三个=== 用于严格比较 只要类型不匹配则返回false return typeof(id)==="string"?document.getElementById(id):id;//上面的id是形参 这里的id是实参 } // 封装通用事件绑定方法 // handler处理 element绑定事件的DOM元素 type事件名字 handler事件处理程序 function addHandler(element,type,handler){ //非ie浏览器 if(element.addEventListener){ element.addEventListener(type,handler,true);//事件，处理程序 冒泡或捕获 //ie浏览器支持DOM2级事件 //next.οnclick=function(){}和next["onclick"]=function(){}效果相同 } else if(element.attachEvent){ element.attachEvent("on"+type,handler); //ie浏览器不支持DOM2级事件 } else{ element["on"+type]=null; } } //绑定事件 //DOM2级事件要把on去掉 // fris.addEventListener("click",function(){}); //切换图片的函数 function changeImg(){ //遍历所有图片，将图片都隐藏起来，将圆点上的类清除 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; } changeImg(); }); //点击上一张按钮显示上一张图片 addHandler(fris,"click",function(){ // 点击上一张按钮 索引递增 index--;//索引递减 if (index<0) { index=size-1; } changeImg(); }); // 给所有圆点绑定事件 点击圆点索引切换图片 for (var d=0;d<size;d++){ //添加自定义属性 dots[d].setAttribute("data-id",d);//前一个参数：自定义属性名 后一个参数：赋予何值 addHandler(dots[d],"click",function(){ index = this.getAttribute("data-id"); changeImg(); }); } //自动轮播 function startAutoplay(){ //setInterval第一个参数为函数 第二个参数为每间隔多少时间操作一次 以毫秒为单位 timer = setInterval(function(){ index++; if(index>=size){ index=0;} changeImg(); },3000) } //清除定时器 停止自动轮播 function stopAutoplay(){ if(timer){ clearInterval(timer); } } //鼠标滑过主菜单 for(var m =0,idx,mlen=menuItems.length;m<mlen;m++){ //给所有主菜单定义属性 表明它的索引 menuItems[m].setAttribute("data-index",m); addHandler(menuItems[m],"mouseover",function(){ // 显示子菜单所在的背景 subMenu.className="sub-menu";//隐形的将hide属性移除 //获取当前主菜单的索引 idx=this.getAttribute("data-index"); //遍历所有的子菜单innerBox 然后将它们先隐藏 for (var j =0,jlen=innerBox.length;j<jlen;j++){ //隐藏所有子菜单 innerBox[j].style.display="none"; menuItems[j].style.background="none";//不需要背景颜色 } //显示对应子菜单 innerBox[idx].style.display="block"; //让主菜单根据索引 背景颜色显示出来 menuItems[idx].style.background="rgba(0,0,0,.1)"; }) } //鼠标离开banner,隐藏子菜单 addHandler(banner,"mouseout",function(){ subMenu.className="sub-menu hide"; }); //鼠标离开主菜单，隐藏子菜单 addHandler(menuContent,"mouseout",function(){ subMenu.className="sub-menu hide"; }); //鼠标划入子菜单，显示子菜单 addHandler(subMenu,"mouseover",function(){ subMenu.className="sub-menu"; }); //鼠标划出子菜单，隐藏子菜单 addHandler(subMenu,"mouseout",function(){ subMenu.className="sub-menu hide"; }); //鼠标划入main 停止轮播 addHandler(main,"mouseover",stopAutoplay); //鼠标划出main 开启轮播 addHandler(main,"mouseout",startAutoplay); //自动开启轮播 startAutoplay();