---恢复内容开始---
在做这个的时候，最不会的是中间轮播图下边的数字是如何实现转变的，后来加入了jQuery就能实现了。
css部分：
1 <style type="text/css"> 2 *{ 3 margin: 0; 4 padding: 0; 5 list-style: none; 6 } 7 #head_nav{ 8 width: 1170px; 9 height: 50px; 10 background:#A40200 ; 11 display: flex; 12 flex: row; 13 text-align: center; 14 line-height: 50px; 15 margin: 0 auto; 16 } 17 #head_nav ul li{ 18 margin-left: 5px; 19 width: 60px; 20 float: left; 21 } 22 #head_nav ul li a{ 23 text-decoration: none; 24 color: white; 25 font-weight: bold; 26 } 27 #nav{ 28 width: 1170px; 29 margin: 0 auto; 30 height: 30px; 31 display: flex; 32 flex: row; 33 background: #F0F0F0; 34 margin-bottom: 10px; 35 } 36 #nav ul li{ 37 float: left; 38 width: 77px; 39 height: 30px; 40 line-height: 30px; 41 text-align: center; 42 } 43 #nav ul li a{ 44 color: black; 45 text-decoration: none; 46 } 47 #add{ 48 width: 1170px; 49 margin: 0 auto; 50 height: 85px; 51 margin-bottom: 10px; 52 } 53 #add img{ 54 width: 1170px; 55 } 56 #product{ 57 width: 1170px; 58 height: 470px; 59 margin: 0 auto; 60 } 61 #product_left{ 62 float: left; 63 width: 417px; 64 height: 445px; 65 padding: 11px; 66 border: 1px solid gainsboro; 67 } 68 #product_left_img{ 69 width:420px; 70 } 71 #product_left_bottom{ 72 text-align: center; 73 border-top: 1px solid gainsboro; 74 margin-top: 15px; 75 padding-top: 4px; 76 } 77 #product_left_bottom img{ 78 margin: 4px; 79 width: 85px; 80 border: 1px solid gainsboro; 81 } 82 #right_banner{ 83 float: right; 84 width: 723px; 85 height: 400px; 86 } 87 #right_banner ul{ 88 width: 723px; 89 } 90 #right_banner img{ 91 width: 720px; 92 margin-left: 5px; 93 } 94 .banner_span{ 95 display: inline-block; 96 width: 40px; 97 height: 40px; 98 float: left; 99 border: 1px solid white; 100 background: url(images/spritesbgcon.png) no-repeat; 101 background-position: -120px -100px; 102 } 103 #right_banner_text ul{ 104 float: left; 105 display: flex; 106 flex: row; 107 font-size: 12px; 108 } 109 #right_banner_text ul li{ 110 list-style: disc !important; 111 margin: 13px; 112 } 113 #right_banner_text ul li a{ 114 text-decoration: none; 115 margin-top:15px; 116 color: black; 117 } 118 /*轮播图下边的数字的样式*/ 119 .num{ 120 position: absolute; 121 text-align: center; 122 width: 100%; 123 left: 450px; 124 top: 550px; 125 } 126 .num li{ 127 display: inline-block; 128 width: 20px; 129 height: 20px; 130 background-color: darkgray; 131 color: white; 132 text-align: center; 133 line-height: 20px; 134 border-radius: 50%; 135 margin: 0 20px; 136 } 137 /*轮播图下边数字变化之后显示的样式*/ 138 .current{ 139 background-color: red!important; 140 } 141 </style>
中间HTML部分：
1 <!--头部导航栏--> 2 <div id="head_nav"> 3 <ul> 4 <li><a href="#">首页</a></li> 5 <li><a href="">T恤</a></li> 6 <li><a href="">帆布鞋</a></li> 7 <li><a href="">衬衫</a></li> 8 <li><a href="">POLO衫</a></li> 9 <li><a href="">休闲裤</a></li> 10 <li><a href="">裙子</a></li> 11 <li><a href="">袜子</a></li> 12 <li><a href="">NBA</a></li> 13 <li><a href="">短裤</a></li> 14 <li><a href="">牛仔</a></li> 15 <li><a href="">针织衫</a></li> 16 <li><a href="">休闲包</a></li> 17 <li><a href="">运动鞋</a></li> 18 <li><a href="">优鲨</a></li> 19 <li><a href="">Justyle</a></li> 20 <li><a href=""></a></li> 21 <li style="width: 80px;height:20px;overflow:hidden;position: relative;margin-left: 40px;margin-top: 15px;"><a href=""><img src="images/spritesbg.png" style="position: absolute; right: 0;bottom: 0;"/></a></li> 22 </ul> 23 </div> 24 <!--中间导航栏部分--> 25 <div id="nav"> 26 <ul> 27 <li><a href="#">男人</a></li> 28 <li><a href="">女人</a></li> 29 <li><a href="">童装</a></li> 30 <li><a href="">男鞋</a></li> 31 <li><a href="">女鞋</a></li> 32 <li><a href="">运动鞋</a></li> 33 <li><a href="">内衣</a></li> 34 <li><a href="">配饰</a></li> 35 <li><a href="">家居</a></li> 36 <li><a href="">箱包</a></li> 37 <li><a href="">化妆品</a></li> 38 <li><a href="">时尚女装</a></li> 39 <li><a href="">达人街拍</a></li> 40 <li><a href="">今日团购</a></li> 41 <li><a href="">最新到货</a></li> 42 </ul> 43 </div> 44 <!--广告部分--> 45 <div id="add"> 46 <img src="images/ad1.png"/> 47 </div> 48 <!--中间商品部分，左右两部分，左边商品，右边轮播图--> 49 <div id="product"> 50 <div id="product_left"> 51 <img src="images/flash_box_left/1.jpg" id="product_left_img"/> 52 <div id="product_left_bottom"> 53 <img src="images/flash_box_left/2.jpg"/> 54 <img src="images/flash_box_left/3.jpg"/> 55 <img src="images/flash_box_left/4.jpg"/> 56 <img src="images/flash_box_left/5.jpg"/> 57 </div> 58 </div> 59 <!--轮播图下边的数字--> 60 <div > 61 <ul class="num"> 62 <li class="current">1</li> 63 <li>2</li> 64 <li>3</li> 65 <li>4</li> 66 </ul> 67 </div> 68 <div id="right_banner"> 69 <div id="banner"> 70 <img src="images/flash/6.jpg" id="banner_img"/> 71 </div> 72 <div id="right_banner_text"> 73 <ul> 74 <li style="list-style: none !important;"><span class="banner_span"></span></li> 75 <li style="width: 170px;"><a href="#">休闲短袖衬衫 新品上市 79元起</a></li> 76 <li style="width: 100px;"><a href="">礼品卡购物折上折</a></li> 77 <li style="width: 180px;"><a href="">微信关注有礼，凡客诚品官方商城</a></li> 78 <li style="width: 100px;"><a href="">新款休闲包9万</a></li> 79 </ul> 80 </div> 81 </div> 82 </div>
最后是js部分，这边导入的jQuery包为学习版的jquery-1.8.3.js。
1 <script src="js/jquery-1.8.3.js"></script> 2 <script type="text/javascript"> 3 // 轮播图部分 4 $(function(){ 5 setInterval("banner()",3000) 6 }); 7 var i=1; 8 function banner(){ 9 i++; 10 $("#banner_img")[0].src="images/flash/"+i+".jpg"; 11 if(i==7){i=0} 12 } 13 // 轮播图下边文字的改变 14 //设置一个定时器 15 var time=setInterval(move,3000); 16 //定义改变样式的函数 17 function move() { 18 index++; 19 if (index==4){ 20 index=0 21 } 22 //jquery中sibling是取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。 23 //jQuery中eq是获取第N个元素 24 //addclass是添加类样式 25 //removeClass是从所有匹配的元素中删除全部或者指定的类。 26 //这jQuery语法的意思是，.num类选择器下的下标为index的li添加current样式，其他同辈（也就是其他li）删除current样式 27 $(".num li").eq(index).addClass("current").siblings().removeClass("current"); 28 }; 29 </script>
---恢复内容结束---