本文實例為大家分享了Bootstrap輪播圖的實現代碼，供大家參考，具體內容如下
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 模板</title> <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style> img { width: 100%; height: 100%; } p { text-align: center; } </style> </head> <body> <!-- 輪播圖部分 --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <!-- 指示器 --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <!-- 包裹幻燈片 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/輪播1.png" alt="輪播圖1"> <div class="carousel-caption"> 輪播圖1 </div> </div> <div class="item"> <img src="images/輪播2.png" alt="輪播圖2"> <div class="carousel-caption"> 輪播圖2 </div> </div> <div class="item"> <img src="images/輪播3.png" alt="輪播圖3"> <div class="carousel-caption"> 輪播圖3 </div> </div> <p>輪播圖嘗試</p> </div> <!-- Controls --> <!-- 控制 --> <!-- 向左滑動 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span> <span class="sr-only">Previous</span> </a> <!-- 向右滑動 --> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- js控制輪播圖 --> <button id="prev">向前</button> <button id="next">向后</button> <button id="pause">停止</button> <button id="start">開始</button> <button id="jump">到第二張</button> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <!-- 輪播圖還支持js控制 --> <script> $(function(){ $('.carousel').carousel({ interval: 2000,//輪播間隔 pause:"hover", //鼠標懸停在輪播圖上，是否停止滾動 wrap:true, // keyboard:true //響應鍵盤事件 }); $("#prev").click(function(event) { $('.carousel').carousel('prev')// 周期上一個項目。 }); $("#next").click(function(event) { $('.carousel').carousel('next')// 周期到下一個項目。 });; $("#pause").click(function(event) { $('.carousel').carousel('pause')// 從通過項目循環停止傳送帶。 });; $("#start").click(function(event) { $('.carousel').carousel('cycle')// 通過傳送帶項目周期從左到右。 });; $("#jump").click(function(event) { $('.carousel').carousel(1)// 循環傳送帶到一個特定的幀（0為主，類似于數組）。 });; }); </script> </body></html>如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
