---恢復內容開始---
在做這個的時候，最不會的是中間輪播圖下邊的數字是如何實現轉變的，后來加入了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>
---恢復內容結束---