快捷導(dǎo)航

Bootstrap輪播插件使用代碼

更新時間：2016年10月11日 11:28:17 作者：圣嘆&北京

這篇文章主要為大家詳細(xì)介紹了Bootstrap輪播插件使用代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下

Bootstrap不僅提供了整套的樣式，還提供了一系列插件，幫助開發(fā)者構(gòu)建更受歡迎的網(wǎng)站。

Bootstrap的輪播插件用起來很簡單，代碼如下。

<!DOCTYPE html>

<html lang="en">

 <head>

 <meta charset="utf-8">

 <title>Bootstrap, from Twitter</title>

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <meta name="description" content="">

 <meta name="author" content="">

 

 <link href="bootstrap/css/bootstrap.css" rel="stylesheet">

 <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

 </head>

 <body>

 

<div id="myCarousel" class="carousel slide">

 <ol class="carousel-indicators">

 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

 <li data-target="#myCarousel" data-slide-to="1"></li>

 <li data-target="#myCarousel" data-slide-to="2"></li>

 </ol>

 <!-- Carousel items -->

 <div class="carousel-inner">

 <div class="item active">

   <img src="Demo_lunbo1.jpg" alt="">

   <div class="carousel-caption">

   <h4>八月十五回家拍攝</h4>

   <p>八月十五回家時正趕上下雨，雨后的天空掛上了彩虹</p>

   </div>

   </div>

   <div class="item">

   <img src="Demo_lunbo2.jpg" alt="">

   <div class="carousel-caption">

   <h4>眼睛里的景色更迷人</h4>

   <p>照片中的彩虹總不如眼睛看到的美。</p>

   </div>

   </div>

   <div class="item">

   <img src="Demo_lunbo3.jpg" alt="">

   <div class="carousel-caption">

   <h4>雨后的黃昏</h4>

   <p>美好的東西總是短暫的，一會天就黑了。</p>

   </div>

   </div>

 </div>

 <!-- Carousel nav -->

 <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>

 <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div>

 

 <script src="bootstrap/js/jquery.js"></script>

 <script src="bootstrap/js/bootstrap.js"></script>

 

 </body>

</html>

效果圖：

如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript實現(xiàn)的右下角彈窗實例
這篇文章主要介紹了javascript實現(xiàn)的右下角彈窗,實例分析了javascript實現(xiàn)右下角彈窗的完整實現(xiàn)步驟與技巧,需要的朋友可以參考下
2015-04-04
javascript 動態(tài)添加事件代碼
往往我們需要在 JS 中動態(tài)添加事件，這就涉及到瀏覽器兼容性問題了，以下談及的幾種方法，我們也常?；旌鲜褂谩?/div> 2008-11-11
JS實現(xiàn)帶有抽屜效果的產(chǎn)品類網(wǎng)站多級導(dǎo)航菜單代碼
這篇文章主要介紹了JS實現(xiàn)帶有抽屜效果的產(chǎn)品類網(wǎng)站多級導(dǎo)航菜單代碼,涉及JavaScript動態(tài)操作頁面元素屬性的技巧,整體界面效果美觀大方,具有極強(qiáng)的立體感,需要的朋友可以參考下
2015-09-09
js實現(xiàn)網(wǎng)頁定位導(dǎo)航功能
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)網(wǎng)頁定位導(dǎo)航功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
原生Js實現(xiàn)的畫廊功能
這篇文章主要介紹了原生Js實現(xiàn)的畫廊功能，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下
2021-05-05
echarts餅圖自定義設(shè)置顏色的3種實現(xiàn)方式
ECharts餅圖的顏色可以通過多種方式進(jìn)行設(shè)置,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖自定義設(shè)置顏色的3種實現(xiàn)方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
js高精度計算decimal.js庫用法demo
這篇文章主要給大家介紹了關(guān)于js高精度計算decimal.js庫用法的相關(guān)資料,decimal.js是使用的二進(jìn)制來計算的,所以能解決js的精度問題,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
JS格式化時間的幾種方法總結(jié)
這篇文章介紹了JS格式化時間的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-04-04
深入理解JavaScript中的宏任務(wù)和微任務(wù)機(jī)制
JavaScript中的任務(wù)分為宏任務(wù)和微任務(wù)，它們的執(zhí)行順序會影響代碼的執(zhí)行結(jié)果。了解它們的機(jī)制可以幫助我們更好地理解事件循環(huán)和異步編程，避免出現(xiàn)一些意想不到的錯誤
2023-05-05
?javascript數(shù)組中的findIndex方法?
這篇文章主要介紹了javascript數(shù)組中的findIndex方法，findIndex()?方法返回傳入一個測試條件函數(shù)符合條件的數(shù)組第一個元素位置，下面更多相關(guān)資料，需要的小伙伴可以參考一下
2022-03-03