輕松實現(xiàn)Bootstrap圖片輪播
更新時間：2020年04月20日 11:12:22 作者：Superpan2015
這篇文章主要介紹了全面解析Bootstrap圖片輪播效果，Bootstrap提供了carousel插件，實現(xiàn)圖片輪播非常方便，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例講解了Bootstrap實現(xiàn)圖片輪播的詳細代碼，分享給大家供大家參考，具體內(nèi)容如下
具體代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<style type="text/css">
img{
margin:0 auto;
}
</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/lunbo1.jpg" height="266" width="800" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/lunbo2.jpg" height="266" width="800" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/lunbo3.jpg" height="266" width="800" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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>
</body>
</html>
效果
可選參數(shù)
- data-ride=”carousel”：加上可以自動播放，不加點擊后才會播放。
- 添加標題
標題寫在 <div class="carousel-caption"></div>之間
例如：
<div class="carousel-caption"> <h3>果殼推書正式上線</h3> <p>好書分享、經(jīng)驗交流</p> </div>
如果大家還想深入學(xué)習(xí)，可以點擊這里進行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播
以上就是針對javascript圖片輪播進行的詳細介紹，希望本文對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章介紹了異步動態(tài)加載js與css文件的幾種方法，有需要的朋友可以參考一下2013-09-09
js獲取瀏覽器的可視區(qū)域尺寸的實現(xiàn)代碼，需要的朋友可以參考下。2011-11-11
JS實現(xiàn)超簡單的漢字轉(zhuǎn)拼音功能示例
這篇文章主要介紹了JS實現(xiàn)超簡單的漢字轉(zhuǎn)拼音功能,結(jié)合實例形式分析了javascript漢字轉(zhuǎn)換成拼音的函數(shù)定義與使用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了bootstrap table小案例，教大家如何使用表格組件bootstrap table2016-10-10
這篇文章主要介紹了微信小程序 拍照或從相冊選取圖片上傳代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
不使用XMLHttpRequest實現(xiàn)異步加載 Iframe和script
運用Iframe和script可以實現(xiàn)簡單的異步加載,沒有使用XMLHttpRequest，需要的朋友可以參考下2012-10-10
關(guān)于js函數(shù)解釋(包括內(nèi)嵌,對象等)
下面小編就為大家?guī)硪黄P(guān)于js函數(shù)解釋(包括內(nèi)嵌,對象等) 。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
上傳文件返回的json數(shù)據(jù)會被提示下載問題解決方案
這篇文章主要介紹了項目中python+js實現(xiàn)的上傳文件返回的json數(shù)據(jù)會被提示下載問題解決方案,需要的朋友可以參考下2014-12-12
本篇主要講解本地對象Array和Date的各種方法。2010-05-05
JSON(JavaScript Object Notation)是JavaScript編程語言的一個子集,正因JSON是JavaScript的一個子集,所以它可清晰的運用于此語言中,這篇文章主要給大家介紹了關(guān)于javaScript中json字符串操作的相關(guān)資料,需要的朋友可以參考下2023-11-11