一個最簡單的輪播圖的製作（個人小作品）

個人小作品之輪播圖的製作

輪播圖是一個頁面中常見的特效。

本作品完整代碼：點擊查看本作品完整代碼

首先來看看效果圖：

整體來分析這個輪播圖：

1、可以將這個輪播圖整體看作成一個大盒子。即用一個<div>表示。

2、圖片部分，圖片的尺寸大小與整體盒子的尺寸大小一樣，也就是說圖片區域繼承了整體盒子的尺寸大小，用一個<div>來裝<img>。

3、因爲這個輪播圖的效果是不同圖片的切換其後面的背景顏色也同時切換，因爲需要用一個<div>來表示一個圖片的背景部分。

4、按鈕部分，使用定位來定義按鈕的位置，切換不同的圖片，其相應的按鈕也切換爲不同的按鈕。

根據思想可以完成HTML部分的佈局：

<!doctype html>
<html lang="zh-Hans-CN">
  <head>
    <meta charset="utf-8">
    <title>輪播圖</title>
    <meta name="Keywords" content="輪播">
    <meta name="Description" content="輪播">
    <link rel="stylesheet" href="css/lunbo.css">
  </head>
  <body>
  
    <!-- banner start -->
    <div id="wrapper" class="wrapper">
      <div id="banner" class="banner banner-first">
        <div id="banner-box" class="banner-box">
          <img src="images/1.webp" width="1130" height="500" alt="天貓發售">
        </div>
      </div>
      <div id="banner" class="banner banner-two">
        <div id="banner-box" class="banner-box">
          <img src="images/2.jpg" width="1180" height="500" alt="天貓發售">
        </div>
      </div>
      <div id="banner" class="banner banner-three">
        <div id="banner-box" class="banner-box">
          <img src="images/3.jpg" width="1130" height="500" alt="天貓發售">
        </div>
      </div>
      <div id="banner" class="banner banner-four">
        <div id="banner-box" class="banner-box">
          <img src="images/4.jpg" width="1180" height="500" alt="天貓發售">
        </div>
      </div>
      <div id="banner" class="banner banner-five">
        <div id="banner-box" class="banner-box">
          <img src="images/5.webp" width="1130" height="500" alt="天貓發售">
        </div>
      </div>
      <div id="banner" class="banner banner-six">
        <div id="banner-box" class="banner-box">
          <img src="images/6.webp" width="1130" height="500" alt="天貓發售">
        </div>
      </div>
      <div id="banner-tab" class="banner-tab">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <!-- banner end -->
  
  <script src="script/lunbo.js"></script>
  </body>
</html>

關於<img>標籤的知識：

在實際的純文本中是不能添加圖片的，<img>標籤就是爲圖片定義一個點位符而已。

在HTML中需要寫成

<img src="" width="" height="" alt="">

爲什麼要在HTML中寫入<img>的"width"和"height"屬性？

答：是爲了網站性能：網站打開速度要快。加載圖片時，瀏覽器需要加載和計算，如果告訴了瀏覽器圖片的寬、高，那麼瀏覽器就不需要計算圖片的寬、高，這樣瀏覽器加載速度就很快了。

"alt"屬性？

答：alt屬性用於告訴搜索引擎該圖片的信息，利於搜索引擎抓取alt屬性的值表示的圖片起見名知意的功能。

CSS部分：

* {
  margin: 0;
  padding: 0;
}

/* banner start */
#wrapper {
  position: relative;
  width: 100%;
  height: 500px;
  background: red;
}

#wrapper .banner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; /* 這裏100%，它繼承了wrapper的高度，所以還是500px */
  opacity: 0;
  transition: 1s;
}


/* 輪播圖背景顏色 */
#wrapper .banner-first {
  background: rgb(223, 175, 109);
}

#wrapper .banner-two {
  background: rgb(232, 232, 232);
}

#wrapper .banner-three {
  background: rgb(133, 198, 236);
}

#wrapper .banner-four {
  background: rgb(232, 232, 232);
}

#wrapper .banner-five {
  background: rgb(232, 232, 232);
}

#wrapper .banner-six{
  background: rgb(80, 113, 233);
}

#wrapper .banner .banner-box {
  width: 1230px;
  height: 100%;
  margin: 0 auto;
}


/* 按鈕 */
#wrapper .banner-tab {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

#wrapper .banner-tab  span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 3px;
  background: rgba(105, 105, 105, .5);
}

#wrapper .banner-tab  span.on {
  background: #fff;
}
/* banner end */

其中，要使用圖片重疊在一起，需要對圖片元素使用絕對定位屬性"display: absolute;"。定位：就是一個參考物與運動元素的關係。

關於banner-tab:

使用span來表示按鈕，span是內聯元素，爲其添加display: inline-block;可以使其具有塊級屬性（有寬、高），內聯元素具有文字屬性即可以使用text-align來定義其對齊方式。

JS部分：

var aBanner = document.getElementsByClassName("banner");
var banner_box = document.getElementsByClassName("banner-box");
var aSpan = document.getElementsByClassName("banner-tab")[0].getElementsByTagName("span");

//初始化樣式
aBanner[0].style.opacity = "1";
aSpan[0].className = "on";

//用於存儲當前單擊按鈕的索引
var num = 0;
var time;

//點擊輪播
for (var i = 0; i < aSpan.length; i ++) {
    aSpan[i].index = i;
    aSpan[i].onclick = function () {
        for (var j = 0; j < aSpan.length; j ++) {
            num = this.index;
            aSpan[j].className = "";
            aBanner[j].style.opacity = "0";
        }
        
        aSpan[num].className = "on";
        aBanner[num].style.opacity = "1";
    };
}

//定時輪播
time = setInterval(function () {   
    num++;
    num %= aBanner.length;
    for (var j = 0; j < aSpan.length; j ++) {
        aSpan[j].className = "";
        aBanner[j].style.opacity = "0";
    }
        
    aSpan[num].className = "on";
    aBanner[num].style.opacity = "1";
}, 2000);

要使圖片切換爲淡入淡出的效果，可以使用opacity屬性(透明度)來實現，並和transition（規定切換所需要的時間）屬性一起使用。

關於企業規範：

1、模塊化開發：頁面中，缺少的一部分不會影響頁面的另一部分內容。獨立。

2、註釋

3、要使網站打開速度快：

a、減少http請求次數，例如：將多個小圖片合成一個圖片，這樣只向服務器請求一次就行了（已經存儲在緩存器裏）。

b、減少代碼體積，減少不必要的註釋和字符串（小於1的小數省略0只寫小數點和小數點後面的數字，顏色如：#cccccc 寫成：#ccc）