實驗代碼：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" href="./public/bootstrap/css/bootstrap.css">
- <script type="text/javascript" src="public/bootstrap/js/jquery.js"></script>
- <script type="text/javascript" src="public/bootstrap/js/bootstrap.min.js"></script>
- <script type="text/javascript" src="public/bootstrap/js/carouse.js"></script>
- <title>無標題文檔</title>
- </head>
- <body>
- <div class="carousel slide" id="main" style="width:500px; margin:200px">
- <ol class="carousel-indicators">
- <li data-target="#main" data-slide-to="0" class="active"></li>
- <li data-target="#main" data-slide-to="1"></li>
- <li data-target="#main" data-slide-to="2"></li>
- </ol>
- <div class="carousel-inner">
- <div class="active item">
- <img src="images/000 (2).jpg" style="width:100%;" />
- <div class="carousel-caption">
- <h4>第1張</h4>
- <p>這是第1張圖</p>
- </div>
- </div>
- <div class="item">
- <img src="images/2.jpg" style="width:100%;" />
- <div class="carousel-caption">
- <h4>第2張</h4>
- <p>這是第2張圖</p>
- </div>
- </div>
- <div class="item">
- <img src="images/6 (31).jpg" style="width:100%;" />
- <div class="carousel-caption">
- <h4>第3張</h4>
- <p>這是第3張圖</p>
- </div>
- </div>
- </div>
- <a class="carousel-control left" href="#main" data-slide="prev">‹</a>
- <a class="carousel-control right" href="#main" data-slide="next">›</a>
- </div>
- <script>
- $('.carousel').carousel({
- interval: 2000
- })
- $('.carousel').carousel()
- </script>
- </body>
- </html>
效果圖：
