而 Bootstrap 自己也有提供一個輪播元件，效果還蠻不錯的。
提供了上下頁切換、索引切換、圖片說明等功能。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>照片輪播</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<meta charset="utf-8" />
</head>
<body>
<div id="photoCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- 瀏覽控制器-->
<ol class="carousel-indicators">
<li data-target="#photoCarousel" data-slide-to="0" class="active"></li>
<li data-target="#photoCarousel" data-slide-to="1"></li>
<li data-target="#photoCarousel" data-slide-to="2"></li>
</ol>
<!-- 建立相片清單-->
<div class="carousel-inner">
<div class="item active">
<img src="http://www.discuss.com.hk/attachment.php?aid=2324556¬humb=yes" />
<!--加上照片說明-->
<div class="carousel-caption">
<h3>照片說明</h3>
<p>這是我們第一次牽手的地方</p>
</div>
</div>
<div class="item">
<img src="http://image5.tuku.cn/pic/wallpaper/fengjing/zhenhanweimeideziranjingguanbizhi/007.jpg" />
<!--加上照片說明-->
<div class="carousel-caption">
<h3>照片說明</h3>
<p>這是我們第一次相見的地方</p>
</div>
</div>
<div class="item">
<img src="http://www.bz55.com/uploads/allimg/120813/1-120Q3092433.jpg" />
<!--加上照片說明-->
<div class="carousel-caption">
<h3>照片說明</h3>
<p>這是我們第一次約會的地方</p>
</div>
</div>
</div>
<!--上下一張控制-->
<a class="left carousel-control" href="#photoCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#photoCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>
Carousel 輪播元件的使用，只要在 div 將 class 指定為 carousel slide 就可以了。data-ride="carousel" ，則是讓 Carousel 在頁面上一載入就開始執行輪播。data-interval="3000" 則是設定每3秒換一張圖片。
《瀏覽控制器》，這指的是圖片上會出現的小白點、小圈圈，如果你有四張圖片要輪播，就會有四個小白點。他是透過 <ol> 、 <li> 來完成的。ol 頁籤需要加上 carousel-indicators 樣式類別，而 li 頁籤，則是需要指出 Carousel 元件 ID ： data-target="#photoCarousel"，輪播順序：data-slide-to="0" ...，而第一個 li 頁籤還需加上 class="active" ，表示是從這裡開始的。
《建立相片清單》，則是實際用來定義照片來源集合的地方。他是由兩層 div 來完成。第一層是容器，第二層則是個別每一張圖片的定義。首先看第一層，僅需加上樣式類別 carousel-inner 即可。接著看第二層，則是加上樣式類別 item，不過，第一個圖片需額外多加一個 active 的樣式類別。
在第二層的 div 裡，可以看到 <img> 頁籤，他的 src 屬性，就是用來指出照片來源 URL。如果還需要對照片加上說明的話，可以在此多加一個具有樣式類別 carousel-caption 的 div：<div class="carousel-caption"> ，在這 div 裡，可以顯示照片說明。
《上下一張控制》，則是在照片的左右邊各產生一個按鈕，讓你可以操作上一頁、下一頁的動作。data-slide="prev" 、data-slide="next" 分別指出了動作行為，而按鈕的形狀，則是用 <span> 以樣式類別 glyphicon glyphicon-chevron-left、glyphicon glyphicon-chevron-right 所產生的圖形來表示。
參考：
01：Bootstrap Carousel Plugin
02：網頁程式設計的16堂課： HTML5‧CSS3‧JavaScript ‧jQuery‧AJAX‧Bootstrap‧Google Maps
沒有留言:
張貼留言