基於Bootstrap框架的圖片輪播實現

阿新 • • 發佈：2019-01-15

前面介紹過原生的javascript實現圖片輪播效果：http://blog.csdn.net/shoushou71/article/details/51628678，本節通過Bootstrap框架實現圖片輪播效果。

1.Bootstrap介紹

Bootstrap是由Twitter 公司(全球最大的微博)的兩名技術工程師研發的一個基於HTML、CSS、JavaScript 的開源框架。該框架程式碼簡潔、視覺優美，可用於快速、簡單地構建基於PC 及移動端裝置的 Web 頁面需求。Bootstrap最為重要的部分就是它的響應式佈局，通過這種佈局可以相容PC 端、 PAD以及手機移動端的頁面訪問。

Bootstrap中文網站：http://www.bootcss.com/

特點：

Bootstrap非常流行，得益於它非常實用的功能和特點。主要核心功能特點如下：
(1).跨裝置、跨瀏覽器可以相容所有現代瀏覽器，包括比較詬病的IE7、8。
(2).響應式佈局不但可以支援PC 端的各種解析度的顯示，還支援移動端 PAD、手機等螢幕的響應式切換顯示。
(3).提供的全面的元件Bootstrap提供了實用性很強的元件，包括：導航、標籤、工具條、按鈕等一系列組件，方便開發者呼叫。
(4).內建 jQuery 外掛Bootstrap提供了很多實用性的 jquery 外掛，這些外掛方便開發者實現 Web中各種常規特效。
(5).支援 HTML5、CSS3

HTML5 語義化標籤和 CSS3 屬性，都得到很好的支援。
(6).支援 LESS 動態樣式

LESS 使用變數、巢狀、操作混合編碼，編寫更快、更靈活的 CSS。它和Bootstrap 能很好的配合開發。

2.輪播器設計

先看程式碼目錄結構：

原始碼：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>圖片輪播</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css" />
	<style>

	</style>
</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> 
		<div class="carousel-inner">
			<div class="item active" style="background:#223240;">
				<img src="img/slide1.png" alt="第一張" />
			</div>
			<div class="item" style="background:#F5E4DC;">
				<img src="img/slide2.png" alt="第二張" />
			</div>
			<div class="item" style="background:#DE2A2D;">
				<img src="img/slide3.png" alt="第三張" />
			</div>
		
		</div>
	
		<a href="#myCarousel" data-slide="prev" class="carousel-control left">
			<span class="glyphicon glyphicon-chevron-left"> </span>
		</a>
		<a href="#myCarousel" data-slide="next" class="carousel-control right">
			<span class="glyphicon glyphicon-chevron-right"> </span>
		</a>
	</div>




<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">


	
		//自動播放
		$("#myCarousel").carousel({
			interval :1000,
		});
		

</script>
</body>
</html>

樣式：

.logo {
	padding:0;
}
#myCarousel {
	margin: 50px 0 0 0;
}
#navbar-collapse ul {
	margin-top:0;
}
.carousel-inner img{
	margin: 0 auto;
}
.carousel-control{
	font-size: 100px;
	
}

用谷歌瀏覽器測試響應式效果：

由此實現的輪播效果簡單明瞭。

基於Bootstrap框架的圖片輪播實現

1.Bootstrap介紹

基於Bootstrap框架的圖片輪播實現

Jquery 圖片輪播實現原理總結

Bootstrap實現基於carousel.js框架的輪播圖效果（無過渡動畫）

使用Ajax+jQuery來實現前端收到的數據在console上顯示+簡單的主頁設計與bootstrap插件實現圖片輪播

圖片輪播--基於JS陣列實現

五滴水：使用Ajax+jQuery來實現前端收到的資料在console上顯示+簡單的主頁設計與bootstrap外掛實現圖片輪播

iOS開發項目實戰——Swift實現圖片輪播與瀏覽

實現廣告圖片輪播效果-AndroidImageSild

JS實例之圖片輪播，實現圖片播放效果

CSS/HTML/JS實現圖片輪播

使用JQuery實現圖片輪播效果

RollViewPager圖片輪播效果開源框架的使用

原生JS實現圖片輪播

Flexslider插件實現圖片輪播、文字圖片相結合滑動切換效果

實現簡單的圖片輪播功能

JS實現定時操作圖片輪播效果（setInterval）

圖片輪播的實現（html js）

jq + css 實現簡單的圖片輪播效果

【javaweb】JS實現簡單的圖片輪播

圖片輪播的JS和CSS實現

基於Bootstrap框架的圖片輪播實現

1.Bootstrap介紹

相關推薦