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

最新推荐文章于 2022-02-09 11:01:28 发布

shoushou71

最新推荐文章于 2022-02-09 11:01:28 发布

阅读量1.6w

点赞数 5

本文链接：https://blog.youkuaiyun.com/shoushou71/article/details/51814803

版权

本文介绍如何使用Bootstrap框架实现响应式的图片轮播效果。通过简单的代码示例，展示了轮播图的基本配置方法，并解释了其核心特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面介绍过原生的javascript实现图片轮播效果：http://blog.youkuaiyun.com/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;
	
}

用谷歌浏览器测试响应式效果：