BootStrap轮播自动播放和图片宽度问题

最新推荐文章于 2023-10-22 20:57:58 发布

@王小嘿

最新推荐文章于 2023-10-22 20:57:58 发布

阅读量2.2k

点赞数 2

分类专栏： BootStrap

本文链接：https://blog.csdn.net/weixin_44868200/article/details/108876615

版权

Bootstrap Carousel 自动播放图片填充响应式

关键词由CSDN通过智能技术生成

BootStrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、BootStrap轮播自动播放
二、BootStrap轮播图片宽度不会充满
- 1.自动播放
- 2.图片宽度

一、BootStrap轮播自动播放

二、BootStrap轮播图片宽度不会充满

1.自动播放

默认使用Bootstrap的Carousel组件，只需要加上 data-ride=“carousel” 就可以实现自动播放了。无需使用初始化的js函数<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="2000">
使用Jquery的`$(’#slidershow’).carousel({
interval: 2000 // in milliseconds
})``

2.图片宽度

找到最外层的div盒子，给它设定一个固定高度，这边设置为300px,然后找到img标签，将图片设为块状元素，宽度100%，高度与最外层div盒子相同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
		<title></title>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<!-- 当同一个页面中,同时存在多个轮播图时,不同的轮播图以及他的控制按钮,需要有相对应id值 -->
				<div id="myCarousel" class="carousel slide col-lg-12 col-md-12 col-xs-12 col-sm-12" data-ride="carousel" data-interval="2000" style="height: 300px;">
					<!-- 轮播(Carousel)指标 -->
					<!-- data-target 指向被控制的轮播图 -->
					<!-- data-slide-to 表示点击这个点时,需要跳转到第几页 -->
					<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>
					<!-- 轮播项目 -->
					 <!-- 一个item表示一页 -->
					 <!-- active表示当前正在显示的一页 -->
					 <!-- carousel-caption 轮播图中的字幕 -->
					 <!-- 显示在轮播图中心偏下的位置 -->
					 <!--<div class="carousel-caption">-->
					<div class="carousel-inner">
						<div class="item active">
							<img src="http://bpic.588ku.com//back_origin_min_pic/19/08/15/67fec86800712d2384cac4ab943a9cdf.jpg!/fw/750/quality/99/unsharp/true/compress/true" style="display: block;width:100%;height: 300px;"/>
							<div class="carousel-caption">标题 1</div>
						</div>
						<div class="item">
							<img src="//bpic.588ku.com//back_origin_min_pic/20/07/31/26312f69a4ba15a7aaceabd25e61c078.jpg!/fw/750/quality/99/unsharp/true/compress/true"  style="display: block;width:100%;height: 300px;"/>
							<div class="carousel-caption">标题 2</div>
						</div>
						<div class="item">
							<img src="//bpic.588ku.com//back_origin_min_pic/20/08/01/06f91e9299087aabb58da9c9dc9a2031.jpg!/fw/750/quality/99/unsharp/true/compress/true"  style="display: block;width:100%;height: 300px;"/>
							<div class="carousel-caption">标题 3</div>
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<!-- Controls 左右的翻页箭头 -->
					<!-- 翻页控制中,href属性指向所控制的轮播图 -->
					<!-- data-slide 表示翻页的方向 -->
						<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
				</div>
			</div>
		</div>
		<script src="js/jquery-2.1.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>