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

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

黑馬程序員移動(dòng)端輪播效果

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

1.結(jié)構(gòu)分析

整個(gè)輪播圖可以分為兩部分，包括輪播圖圖片和輪播圖指示器(圖片輪播時(shí)隨之變化的小圓點(diǎn))，輪播圖結(jié)構(gòu)如圖所示。

輪播圖結(jié)構(gòu)

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

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

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

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

2.代碼實(shí)現(xiàn)

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

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

<！--輪播圖-->
<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個(gè)<11>...-->
  </ul>
</div>

上述代碼中，第3~l2行代碼定義了輪播圖圖片結(jié)構(gòu)，其中第3行代碼給ul加一個(gè)類名clearfix以清除浮動(dòng)，這是因?yàn)閡l是浮動(dòng)的元素不占高度，所以需要清除浮動(dòng);第13-17行代碼定義了輪播圖指示器結(jié)構(gòu)，其中第l4行代碼為li元素設(shè)置類名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行代碼設(shè)置輪播圖整體模塊寬度為100%：第8行代碼設(shè)置輪播圖圖片外層容器寬度為800%，這是因?yàn)檩啿D外層容器中需要放置8張圖片，每一張圖片寬度是100%，所以輪播圖圖片外層容器寬度為800%;第10~13行代碼設(shè)置每一個(gè)1的寬度為12.5%，即每張圖片寬度占圖片外層容器寬度的1/8，并且設(shè)置元素左浮動(dòng)，使li元素一行顯示;第15行代碼設(shè)置輪播圖圖片寬度為100%，用于使圖片顯示完整;第16行將元素設(shè)為塊級(jí)元素，用于清除文本基線。

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

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

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