Bootstrap 輪播圖的使用和理解

時間 2019-11-09

原文原文鏈接

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3   <head>
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7     <title>Bootstrap 輪播圖</title>
  8     <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
  9     <!--[if lt IE 9]>
 10       <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 11       <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 12     <![endif]-->
 13     
 14     <style>
 15       img {
 16         width: 100%;
 17         height: 100%;
 18       }
 19       p {
 20         text-align: center;
 21       }
 22     </style>
 23   </head>
 24   <body>
 25     <!-- 輪播圖部分 -->
 26     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 27       <!-- Indicators -->
 28       <!-- 指示器 -->
 29       <ol class="carousel-indicators">
 30         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 31         <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 32         <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 33       </ol>
 34 
 35       <!-- Wrapper for slides -->
 36       <!-- 包裹幻燈片 -->
 37       <div class="carousel-inner" role="listbox">
 38         <div class="item active">
 39           <img src="images/輪播1.png" alt="輪播圖1">
 40           <div class="carousel-caption">
 41             輪播圖1
 42           </div>
 43         </div>
 44         <div class="item">
 45           <img src="images/輪播2.png" alt="輪播圖2">
 46           <div class="carousel-caption">
 47             輪播圖2
 48           </div>
 49         </div>
 50         <div class="item">
 51           <img src="images/輪播3.png" alt="輪播圖3">
 52           <div class="carousel-caption">
 53             輪播圖3
 54           </div>
 55         </div>
 56         <p>輪播圖嘗試</p>
 57       </div>
 58 
 59       <!-- Controls -->
 60       <!-- 控制 -->
 61       <!-- 向左滑動 -->
 62       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 63         <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
 64         <span class="sr-only">Previous</span>
 65       </a>
 66       <!-- 向右滑動 -->
 67       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 68         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 69         <span class="sr-only">Next</span>
 70       </a>
 71     </div>
 72 
 73     <!-- js控制輪播圖 -->
 74     <button id="prev">向前</button>
 75     <button id="next">向後</button>
 76     <button id="pause">中止</button>
 77     <button id="start">開始</button>
 78     <button id="jump">到第二張</button>
 79 
 80     <script src="lib/jquery/jquery.js"></script>
 81     <script src="lib/bootstrap/js/bootstrap.js"></script>
 82     <!-- 輪播圖還支持js控制 -->
 83     <script>
 84       $(function(){
 85         $('.carousel').carousel({
 86           interval: 2000,//輪播間隔
 87           pause:"hover", //鼠標懸停在輪播圖上，是否中止滾動
 88           wrap:true,     //
 89           keyboard:true  //響應鍵盤事件
 90         });
 91 
 92         $("#prev").click(function(event) {
 93           $('.carousel').carousel('prev')// 週期上一個項目。
 94         });
 95 
 96         $("#next").click(function(event) {
 97           $('.carousel').carousel('next')// 週期到下一個項目。
 98         });;
 99 
100         $("#pause").click(function(event) {
101           $('.carousel').carousel('pause')// 從經過項目循環中止傳送帶。
102         });;
103 
104         $("#start").click(function(event) {
105           $('.carousel').carousel('cycle')// 經過傳送帶項目週期從左到右。
106         });;
107 
108         $("#jump").click(function(event) {
109           $('.carousel').carousel(1)// 循環傳送帶到一個特定的幀（0爲主，相似於數組）。
110         });;
111 
112 
113 
114       });
115     </script>
116   </body>
117 </html>

注意引入.css和.js 文件查看效果（裏面有三張圖片，隨便找幾張代替即可）css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。