引入bootstrap外掛什麼的就不說了；

步驟 ：
1. 一個包著所有內容大盒子 給它取名 class=”carousel “如果需要動畫效果，再加一個 “slide”
2. “carousel” 內 分為三部分；
3. 都在下面的圖裡；
4. 注意：第三部分的a標籤也有兩個屬性：
5.

data-target=".carousel"  data-slide="prev"(左)
                  右按鈕：data-slide="next"

6.可以通過 .item 內的 .carousel-caption 元素向幻燈片新增標題

結構圖：

例子：

<div class="container">
  <div class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
          <div class="item active">
              <img src="img/Aurelionsol_0.jpg" alt="">
              <div class="carousel-caption">
                  <h4
 
>圖片標題1</h4>
                  <p>描述文字1</p>
              </div>
          </div>
          <div class="item">
              <img src="img/Ahri_0.jpg" alt="">
              <div class="carousel-caption">
                  <h4>圖片標題2</h4>
                  <p
 
>描述文字3</p>
              </div>
          </div>
          <div class="item">
              <img src="img/Akali_0.jpg" alt="">
              <div class="carousel-caption">
                  <h4>圖片標題3</h4>
                  <p>描述文字3</p>
              </div>
          </div>
          <div class="item">
              <img src="img/Annie_0.jpg" alt="">
              <div class="carousel-caption">
                  <h4>圖片標題4</h4>
                  <p>描述文字4</p>
              </div>
          </div>
      </div>
      <ul class="carousel-indicators">
          <li class="active" data-target=".carousel" data-slide-to="0"></li>
          <li data-target=".carousel" data-slide-to="1"></li>
          <li data-target=".carousel" data-slide-to="2"></li>
          <li data-target=".carousel" data-slide-to="3"></li>
      </ul>
      <a href="javascript:" class="carousel-control left" data-target=".carousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a href="javascript:" class="carousel-control right" data-target=".carousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
  </div>
</div>

還有一些JS方法，還請自行翻看菜鳥教程。。。