上一節咱們添加了通欄背景並瞭解了佈局思路，下面就開始做輪播圖啦！

附上輪播圖圖片：

分析：

• 1.輪播圖左右切換按鈕和輪播序號都顯示在圖片上，所以可以利用定位來做。
• 2.輪播序號是一個盒子裡，左浮動對的li標籤。相當於是微型選單欄。

先看一下HTML程式碼：

<div class="banner clearfix">
<!--banner是通欄大盒子-->
  <a href="#" class="bg"></a>
  <!--因為banner盒子裡不止一個a標籤，為了防止繼承給其他a標籤，這裡給a標籤加個類名-->
  <div
 
 class="w main">
  <!--引入版心w,main類負責是輪播圖和右側部分的父盒子-->
     <div class="slider">
     <!--輪播圖大盒子-->
        <a href="#" ><img src="images/slider1.jpg" alt=""/></a>
        <!--插入圖片-->
        <ul class="circle">
        <!-- 小圓點-->
           <li
 
 class="current">1</li>
           <!--當前小圓點，-->
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
           <li>6</li>
         </ul>
         <div class="arrow">   <!--左右兩個三角-->
 

            <a href="javascript:;" class="arrow-l"><</a>
            <!--點選事件，後期可用js左互動-->
            <a href="javascript:;" class="arrow-r">></a>
         </div>
      </div>
      <div class="news">這是右邊的部分，先放著撐佈局</div>
   </div>
</div>

CSS程式碼：

.banner {
    position: relative;
}
.banner .bg {
    /*因為後面還有a標籤，為了防止繼承給其他a標籤，這裡給a標籤加個類名*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 604px;
    background: url(../images/banner.jpg) no-repeat top center;
}
.main{
    position: relative;
}
.slider {
    width: 730px;
    height: 453px;
    /*background-color: pink;*/
    margin: 12px 0 0  220px;
    float: left;
    position: relative;
    /*圓點和切換按鈕的父親盒子相對定位*/
}  /*效果1*/
.circle {
    position: absolute;
    /*原點絕對定位*/
    bottom:8px;
    left: 50%;
    margin-left: -66px;
    /*再向左移動自身的一半*/
}
.circle li {
    width: 18px;
    height: 18px;
    /*設定li盒子的寬高，它是個正方形*/
    border-radius: 50%;
    /*設定圓角50%，可以使一個正方形變成圓形*/
    background-color: #3E3E3E;  
    /*效果2*/
    float: left;
    /*li左浮動，使其並排排列*/
    text-align: center;
    /*文字對齊方式：居中*/
    line-height: 18px;
    /*設定行高等於盒子高，文字垂直居中*/
    color: #fff;
    margin: 0 2px;
    /*每個li之間有2px的間距*/
    cursor: pointer;
    /*當滑鼠經過原點時，變成小手*/
} 
.circle li.current {
    background-color: #B61B1F;
    /*設定當前li的背景顏色，當li帶這個類的時候，背景顏色改變*/
}/*效果3*/
.arrow-l, .arrow-r {
    /*左右兩個按鈕有共同的屬性*/
    position: absolute;
    /*相對於slider盒子，進行絕對定位*/
    width: 28px;
    height: 62px;
    /*設定按鈕的大小*/
    top: 50%;
    /*定位到垂直方向正中間。*/
    margin-top: -31px;
    /*定位是以盒子左上角為基點的，所以當top設定50%時，
    意思是盒子上邊離相對的盒子上邊一半的距離。所以需要再往上移動半個自身高度*/
    color: #fff;
    font: 500 18px/62px "宋體";
    text-align: center;
    background: rgba(0,0,0,.2);
    /*透明度設定 “.2”意思是0.2*/
}/*效果4*/
.arrow-l {
    left: 0;
    /*兩個按鈕唯一不同之處就是位置不同，一個靠左一個靠右，需要單獨設定*/
}
.arrow-r {
    right: 0;
}
.arrow-l:hover,.arrow-r:hover {
    background: rgba(0,0,0,.4);
    /*當滑鼠懸浮在兩個按鈕上時，顏色變深。字型顏色變化*/
    color: #fff;
}

效果1：

這一步圖片已經成功新增上了，小圓點和左右按鈕還是最初模樣。

效果2：

至此，小圓點已出具模型，裡面的文字和小圓點之間的間距需要再調整一下。

效果3：

小圓點已經完成了。當點選小圓點時，當前小圓點的背景顏色會變成紅色，這個需要用JS來實現。咱們就先做靜態的頁面。

效果4：

這一步已經給兩個按鈕設定好樣式，但是還沒有定位。

效果5：

至此，兩邊的按鈕也製作完畢，當滑鼠經過按鈕時，按鈕的顏色會變深。
歡迎指正，謝謝！