移動端網(wǎng)頁布局怎樣添加輪播圖效果？

搜索欄的下方是輪播圖。網(wǎng)頁中使用輪播圖可以增加焦點信息量，可以在一個區(qū)域展示多張宣傳圖。輪播圖效果如圖所示。

黑馬程序員移動端輪播效果

下面將從結構分析和代碼實現(xiàn)兩方面講解輪播圖效果的實現(xiàn)。

1.結構分析

整個輪播圖可以分為兩部分，包括輪播圖圖片和輪播圖指示器(圖片輪播時隨之變化的小圓點)，輪播圖結構如圖所示。

輪播圖結構

上圖中，輪播圖實現(xiàn)細節(jié)說明如下：

(1)整個輪播圖包含在<div>容器中，采用相對定位。

(2)輪播圖圖片使用<ul>、<li>布局。

(3)輪播圖指示器使用<ul>、<li>布局，用于控制輪播圖播放序列。

2.代碼實現(xiàn)

了解了輪播圖的頁面結構之后，下面編寫代碼實現(xiàn)該部分效果。

(1)在 index.html文件中編寫輪播圖結構代碼，具體代碼如下：

<！--輪播圖-->
<div class="hm_banner">
  <ul class="clearfix hm_bannerImg">
    <li><a href="javascript:;"><img src="images/1.jpg"></a></li>
    <li><a href="javascript:;"><img src="images/2.jpg"></a></li>
    <li><a href="javascript:;"><img src="images/3.jpg"></a></li>
    <li><a href="javascript:;"><img src="images/4.jpg"></a></li>
    <li><a href="javascript:;"><img src="images/5.jpg"></a></li>
    <li><a href="javascript:;"><img src="images/6.jpg"></a></li>
    <li><a href="javascript:;"><img src="images/7.jpg"></a></li>
    <li><a href="javascript:;"><img src="images/8.jpg"></a></li>
</ul>
<ul class="hm bannerIndicator">
  <li class="active"></li>
  <li></li>
   <!--...此處省略6個<11>...-->
  </ul>
</div>

上述代碼中，第3~l2行代碼定義了輪播圖圖片結構，其中第3行代碼給ul加一個類名clearfix以清除浮動，這是因為ul是浮動的元素不占高度，所以需要清除浮動;第13-17行代碼定義了輪播圖指示器結構，其中第l4行代碼為li元素設置類名active。

(2)在 index.css文件中編寫輪播圖樣式代碼，具體代碼如下：

/輪播圖*/
.hm_banner {
  width: 1008;
  overflow: hidden;
  position: relative;
}
.hm_bannerImg {
  width: 8008:
}
.hm_bannerImg > li img {
  width: 12.5%;
  float: left;
}
.hm_bannerImg > li img {
  width: 1008;
  display: block;
}

上述代碼中，第3行代碼設置輪播圖整體模塊寬度為100%：第8行代碼設置輪播圖圖片外層容器寬度為800%，這是因為輪播圖外層容器中需要放置8張圖片，每一張圖片寬度是100%，所以輪播圖圖片外層容器寬度為800%;第10~13行代碼設置每一個1的寬度為12.5%，即每張圖片寬度占圖片外層容器寬度的1/8，并且設置元素左浮動，使li元素一行顯示;第15行代碼設置輪播圖圖片寬度為100%，用于使圖片顯示完整;第16行將元素設為塊級元素，用于清除文本基線。

(3)在index.css文件中編寫輪播圖指示器樣式代碼，具體代碼如下：

上述代碼中,第6行代碼設置指示器相對于父元素.hm_banner 進行定位:第11~18行代碼設置指示器小圓點li的寬度、高度、圓角、邊框、浮動一行顯示、左邊距：第20行代碼將第一個li的左邊距設為0:第23行代碼設置li.active的背景色為白色。

保存上述代碼，在瀏覽器中查看頁面效果，如圖所示。