带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变

---恢复内容开始---

在做这个的时候，最不会的是中间轮播图下边的数字是如何实现转变的，后来加入了jQuery就能实现了。

css部分：

 <style type="text/css">
             *{
                 margin:;
                 padding:;
                 list-style: none;
             }
             #head_nav{
                 width: 1170px;
                 height: 50px;
                 background:#A40200 ;
                 display: flex;
                 flex: row;
                 text-align: center;
                 line-height: 50px;
                 margin: 0 auto;
             }
             #head_nav ul li{
                 margin-left: 5px;
                 width: 60px;
                 float: left;
             }
             #head_nav ul li a{
                 text-decoration: none;
                 color: white;
                 font-weight: bold;
             }
             #nav{
                 width: 1170px;
                 margin: 0 auto;
                 height: 30px;
                 display: flex;
                 flex: row;
                 background: #F0F0F0;
                 margin-bottom: 10px;
             }
             #nav ul li{
                 float: left;
                 width: 77px;
                 height: 30px;
                 line-height: 30px;
                 text-align: center;
             }
             #nav ul li a{
                 color: black;
                 text-decoration: none;
             }
             #add{
                 width: 1170px;
                 margin: 0 auto;
                 height: 85px;
                 margin-bottom: 10px;
             }
             #add img{
                 width: 1170px;
             }
             #product{
                 width: 1170px;
                 height: 470px;
                 margin: 0 auto;
             }
             #product_left{
                 float: left;
                 width: 417px;
                 height: 445px;
                 padding: 11px;
                 border: 1px solid gainsboro;
             }
             #product_left_img{
                 width:420px;
             }
             #product_left_bottom{
                 text-align: center;
                 border-top: 1px solid gainsboro;
                 margin-top: 15px;
                 padding-top: 4px;
             }
             #product_left_bottom img{
                 margin: 4px;
                 width: 85px;
                 border: 1px solid gainsboro;
             }
             #right_banner{
                 float: right;
                 width: 723px;
                 height: 400px;
             }
             #right_banner ul{
                 width: 723px;
             }
             #right_banner img{
                 width: 720px;
                 margin-left: 5px;
             }
             .banner_span{
                 display: inline-block;
                 width: 40px;
                 height: 40px;
                 float: left;
                 border: 1px solid white;
                 background: url(images/spritesbgcon.png) no-repeat;
                 background-position: -120px -100px;
             }
             #right_banner_text ul{
                 float: left;
                 display: flex;
                 flex: row;
                 font-size: 12px;
             }
             #right_banner_text ul li{
                 list-style: disc !important;
                 margin: 13px;
             }
             #right_banner_text ul li a{
                 text-decoration: none;
                 margin-top:15px;
                 color: black;
             }
             /*轮播图下边的数字的样式*/
             .num{
                 position: absolute;
                 text-align: center;
                 width: 100%;
                  left: 450px;
                  top: 550px;
             }
             .num li{
                 display: inline-block;
                 width: 20px;
                 height: 20px;
                 background-color: darkgray;
                 color: white;
                 text-align: center;
                 line-height: 20px;
                 border-radius: 50%;
                 margin: 0 20px;
             }
             /*轮播图下边数字变化之后显示的样式*/
              .current{
                 background-color: red!important;
             }
         </style>

中间HTML部分：

 <!--头部导航栏-->
         <div id="head_nav">
             <ul>
                 <li><a href="#">首页</a></li>
                 <li><a href="">T恤</a></li>
                 <li><a href="">帆布鞋</a></li>
                 <li><a href="">衬衫</a></li>
                 <li><a href="">POLO衫</a></li>
                 <li><a href="">休闲裤</a></li>
                 <li><a href="">裙子</a></li>
                 <li><a href="">袜子</a></li>
                 <li><a href="">NBA</a></li>
                 <li><a href="">短裤</a></li>
                 <li><a href="">牛仔</a></li>
                 <li><a href="">针织衫</a></li>
                 <li><a href="">休闲包</a></li>
                 <li><a href="">运动鞋</a></li>
                 <li><a href="">优鲨</a></li>
                 <li><a href="">Justyle</a></li>
                 <li><a href=""></a></li>
                 <li style="width: 80px;height:20px;overflow:hidden;position: relative;margin-left: 40px;margin-top: 15px;"><a href=""><img src="data:images/spritesbg.png" style="position: absolute; right: 0;bottom: 0;"/></a></li>
             </ul>
         </div>
         <!--中间导航栏部分-->
         <div id="nav">
             <ul>
                 <li><a href="#">男人</a></li>
                 <li><a href="">女人</a></li>
                 <li><a href="">童装</a></li>
                 <li><a href="">男鞋</a></li>
                 <li><a href="">女鞋</a></li>
                 <li><a href="">运动鞋</a></li>
                 <li><a href="">内衣</a></li>
                 <li><a href="">配饰</a></li>
                 <li><a href="">家居</a></li>
                 <li><a href="">箱包</a></li>
                 <li><a href="">化妆品</a></li>
                 <li><a href="">时尚女装</a></li>
                 <li><a href="">达人街拍</a></li>
                 <li><a href="">今日团购</a></li>
                 <li><a href="">最新到货</a></li>
             </ul>
         </div>
         <!--广告部分-->
         <div id="add">
             <img src="data:images/ad1.png"/>
         </div>
         <!--中间商品部分，左右两部分，左边商品，右边轮播图-->
         <div id="product">
             <div id="product_left">
                 <img src="data:images/flash_box_left/1.jpg" id="product_left_img"/>
                 <div id="product_left_bottom">
                     <img src="data:images/flash_box_left/2.jpg"/>
                     <img src="data:images/flash_box_left/3.jpg"/>
                     <img src="data:images/flash_box_left/4.jpg"/>
                     <img src="data:images/flash_box_left/5.jpg"/>
                 </div>
             </div>
             <!--轮播图下边的数字-->
             <div >
                 <ul class="num">
                     <li class="current">1</li>
                     <li>2</li>
                     <li>3</li>
                     <li>4</li>
                 </ul>
             </div>
             <div id="right_banner">
                 <div id="banner">
                     <img src="data:images/flash/6.jpg" id="banner_img"/>
                 </div>
                 <div id="right_banner_text">
                     <ul>
                         <li style="list-style: none !important;"><span class="banner_span"></span></li>
                         <li style="width: 170px;"><a href="#">休闲短袖衬衫  新品上市 79元起</a></li>
                         <li style="width: 100px;"><a href="">礼品卡购物折上折</a></li>
                         <li style="width: 180px;"><a href="">微信关注有礼，凡客诚品官方商城</a></li>
                         <li style="width: 100px;"><a href="">新款休闲包9万</a></li>
                     </ul>
                 </div>
             </div>
         </div>

最后是js部分，这边导入的jQuery包为学习版的jquery-1.8.3.js。

 <script src="js/jquery-1.8.3.js"></script>
         <script type="text/javascript">
 //            轮播图部分
             $(function(){
                 setInterval("banner()",3000)
             });
             var i=1;
             function banner(){
                 i++;
                 $("#banner_img")[0].src="data:images/flash/"+i+".jpg";
                 if(i==7){i=0}
             }
 //            轮播图下边文字的改变
             //设置一个定时器
             var time=setInterval(move,3000);
             //定义改变样式的函数
             function move() {
                 index++;
                 if (index==4){
                     index=0
                 }
                 //jquery中sibling是取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
                 //jQuery中eq是获取第N个元素
                 //addclass是添加类样式
                 //removeClass是从所有匹配的元素中删除全部或者指定的类。
                 //这jQuery语法的意思是，.num类选择器下的下标为index的li添加current样式，其他同辈（也就是其他li）删除current样式
                 $(".num li").eq(index).addClass("current").siblings().removeClass("current");
             };
         </script>

---恢复内容结束---