响应式前端框架Bootstrap系列（8）图片处理

以你之姓@ 2021-09-14 14:10 399阅读 0赞

bs对图片的处理只有简单的遮罩功能，如把一张图片变为圆形、正方形等。

.img-rounded：为图片添加圆角   
.img-circle：将图片变为圆形  
.img-thumbnail：缩略图功能  
.img-responsive：块级显示，宽为100%，高为自适应。图片响应式 (将很好地扩展到父元素)

演示代码：

效果图：

![SouthEast][]

在实际应用中，图片很有可能应用在相册、缩略图等界面，在bs中，可以通过系统提供的API实现简单的缩略图功能效果。

演示代码：

效果图：

![SouthEast 1][]  
**Bootstrap 轮播（Carousel）插件**

bs还内置了一个相册轮播的插件效果，Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。它的API介绍参数如下：

**选项:**

（1）interval，属性data-interval（默认为5000），自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。  
（2）pause，属性data-pause（默认为hover），鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。  
（3）wrap，属性data-wrap（默认为true），轮播是否连续循环。  
**方法：**

（1）.carousel(options)，初始化轮播为可选的 options 对象，并开始循环项目。如$('\#identifier').carousel(\{interval: 2000\})  
（2）.carousel('cycle')，从左到右循环轮播项目。  
（3）.carousel('pause')，停止轮播循环项目。  
（4）.carousel(number)，循环轮播到某个特定的帧（从 0 开始计数），如 $("\#identifier").carousel(0);  
（5）.carousel('prev')，循环轮播到上一个项目。  
（6）.carousel('next')，循环轮播到下一个项目。

**事件：**

（1）slide.bs.carousel，当调用 slide 实例方法时立即触发该事件。  
（2）slid.bs.carousel，当轮播完成幻灯片过渡效果时触发该事件。

演示代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>Bootstrap 轮播（Carousel）插件</title>
    		<link rel="stylesheet" href="../libs/bootstrap/3.3.7/css/bootstrap.min.css" />
    		<script src="../libs/jquery/3.2.1/jquery.min.js"></script>
    		<script src="../libs/bootstrap/3.3.7/bootstrap.min.js"></script>
    		<style>
    			#myCarousel {
    				width: 620px;
    				margin: auto;
    			}
    			
    			#myCarousel img {
    				margin: auto;
    				max-width: 1920px;
    				margin: 0 50%;
    				transform: translateX(-50%);
    				width: 100%;
    			}
    		</style>
    		
    	</head>
    
    	<body>
    		<div class="container">
    			<div id="myCarousel" class="carousel slide" data-interval="2000">
    				
    				<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">
    						<img src="../imgs/timg.jpg" alt="First slide" class="img-responsive">
    						<div class="carousel-caption">标题 1</div>
    					</div>
    					<div class="item">
    						<img src="../imgs/timg.jpg" alt="Second slide" class="img-responsive">
    						<div class="carousel-caption">标题 2</div>
    					</div>
    					<div class="item">
    						<img src="../imgs/timg.jpg" alt="Third slide" class="img-responsive">
    						<div class="carousel-caption">标题 3</div>
    					</div>
    				</div>
    				
    				<a class="carousel-control left" href="#myCarousel" data-slide="prev" style="line-height: 370px; font-size: 140px;">‹</a>
    				<a class="carousel-control right" href="#myCarousel" data-slide="next" style="line-height: 370px; font-size: 140px;">›</a>
    			</div>
    		</div>
    	</body>
    	<script>
    		// 方法
    		$('#myCarousel').carousel('cycle');
    
    		//事件
    		$('#myCarousel').on('slide.bs.carousel', function() {
    			console.log("slide.bs.carousel事件触发");
    		});
    	</script>
    </html>

效果图：

![SouthEast 2][]

[SouthEast]: /images/20210813/0ada9e15f6df43acb6a21effa8dc7d3e.png
[SouthEast 1]: /images/20210813/1b56415e2f3842c692a4f11f4298fc49.png
[SouthEast 2]: /images/20210813/c7ce3ffa1c39401caafe42e6d6eb148f.png