基于Bootstrap框架的图片轮播实现

r囧r小猫 2022-09-23 03:42 165阅读 0赞

前面介绍过原生的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.轮播器设计

先看代码目录结构：![Center][]

源码：

<!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;
    	
    }

用谷歌浏览器测试响应式效果：![Center 1][]

由此实现的轮播效果简单明了。

[Center]: /images/20220721/a6803e1426a848f0858024a87d1196b0.png
[Center 1]: /images/20220721/d028fb2771fd4a68ae75d2ec87c8dae5.png