html页面：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
css设置：
1 #nav_div1,#nav_div2,#nav_div3,#nav_div4,#nav_div5,#nav_div6,#nav_div7,#nav_div8{ 2 height: 656px; 3 width: 1366px; 4 } 5 #nav_div1{ 6 background: url(../images/bj-imges/2_01.jpg) ; 7 background-size:contain; 8 margin-top: -4px; 9 }10 #nav_div2{11 background: url(../images/bj-imges/2_03.gif);12 background-size:contain;13 margin-top: 0px;14 }15 #nav_div3{16 background: url(../images/bj-imges/2_05.gif);17 background-size:contain;18 margin-top: -2px;19 }20 #nav_div4{21 background: url(../images/bj-imges/2_07.gif);22 background-size:contain;23 margin-top: 0px;24 }25 #nav_div5{26 background: url(../images/bj-imges/2_09.gif);27 background-size:contain;28 margin-top: -22px;29 }30 #nav_div6{31 background: url(../images/bj-imges/2_11.gif);32 background-size:contain;33 margin-top: 0px;34 }35 #nav_div7{36 background: url(../images/bj-imges/2_13.gif);37 background-size:contain;38 margin-top: 0px;39 }40 #nav_div8{41 background: url(../images/bj-imges/2_16.gif);42 background-size:contain;43 margin-top: 0px;44 } 1 /*首页一*/ 2 .nav_size{ 3 height: 42px; 4 width: 730px; 5 margin-left: 630px; 6 margin-top: 4px; 7 } 8 .text_name{ 9 float: left;10 margin-top: 12px;11 margin-left: 0px;12 color: #dedede;13 font-size: 12px;14 width: 80px;15 height: 24px;16 text-align: center;17 }18 .text_name:hover{19 margin-top: 12px;20 background: #e2cda0;21 width: 80px;22 height: 24px;23 line-height: 24px;24 color: #342121;25 }26 .text_name1 a{27 color: #dedede;28 text-decoration: none;29 font-size: 12px;30 width: 80px;31 height: 24px;32 }33 .text_name1 a:hover{34 color: #342121;35 }36 .text_duname{37 float: left;38 margin-top: 12px;39 margin-left: 20px;40 color: #342121;41 font-size: 12px;42 background: #e2cda0;43 width: 70px;44 height: 24px;45 text-align: center;46 line-height: 24px;47 }
js代码（插入数据）：
1 function nameone(){ 2 //定义一个数组存内容 3 var arr=Array("首页","服务项目","场景餐饮定制","成功案例 ","关于国宴","活动策化","物料/餐费租赁","人才招聘","联系国宴"); 4 //初始化定义为空 5 var tr=""; 6 //循环数组 7 for(var i=0;i "+arr[i]+""; //设置统一的class名，加样式 11 biaoshi"+i+"每次循环都索引加一
12 }else if(i==3){ //判断如果索引等于3 加一个锚链接 13 tr += " "; 14 }else{ //剩余所有数组内容 15 tr += " "+arr[i]+" "; 16 } 17 } 18 // 将内容插入到这个标签中 19 $(".nav_size").html(tr); 20 } js代码（操作页面实现滑轮滚动换页并且每当换页导航会跳到相应的位置）：
1 function windowAddMouseWheel() { 2 var i = 0; 3 var scrollFunc = function (e) { 4 e = e || window.event; // e 代表事件（event）对象，即所谓的事件驱动源 5 if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件 6 if (e.wheelDelta > 0) { //当滑轮向上滚动时 7 //alert("滑轮向上滚动i"+e.wheelDelta); 8 i++; 9 window.scrollTo(0,660*i);10 } 11 if (e.wheelDelta < 0 ) { //当滑轮向下滚动时 12 //alert("滑轮向下滚动"+e.wheelDelta); 13 i--;14 window.scrollTo(0,660*i);15 } 16 }else if(e.detail){ //Firefox滑轮事件 17 if(e.detail>0){ //当滑轮向上滚动时 18 i++;19 window.scrollTo(0,660*i); //设置上滑页面的高度20 //alert("滑轮向上滚动"+i);21 $(".qing").css("background-color",""); //清空所有颜色22 $(".biaoshi"+i).css("background-color","#ccc"); //只有索引到这个位置时，内容会单独显示设置的样式23 } 24 if (e.detail< 0) { //当滑轮向下滚动时 25 i--;26 window.scrollTo(0,660*i); //设置下滑页面的高度27 //alert("滑轮向下滚动"+i); 28 $(".qing").css("background-color",""); //清空所有颜色29 $(".biaoshi"+i).css("background-color","#dedede"); //只有索引到这个位置时，内容会单独显示设置的样式30 $(".biaoshi"+i).css("line-height","24px");31 } 32 } 33 }; 34 //给页面绑定滑轮滚动事件 35 if (document.addEventListener) { 36 document.addEventListener('DOMMouseScroll', scrollFunc, false); 37 } 38 //滚动滑轮触发scrollFunc方法 39 window.onmousewheel = document.onmousewheel = scrollFunc; 40 }