bootstrap学习:案例-轮播

类似 查看官方文档的案例 轮播图是动态的 使用JavaAcript插件部分Carouselhttps://v3.bootcss.com/javascript/#carousel

 

首先将图片变成相同尺寸：调用模型

	<!-- 轮播图 -->
		<div id="carousel-example-generic" class="carousel slide demo-height" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				<li data-target="#carousel-example-generic" data-slide-to="3"></li>
				<li data-target="#carousel-example-generic" data-slide-to="4"></li>
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img src="../../img/谷歌.jpg" alt="First slide">
					<div class="carousel-caption">
						<h3>Chrome</h3>
					</div>
				</div>
				<div class="item">
					<img src="../../img/火狐.jpg" alt="Second slide">
					<div class="carousel-caption">
						<h3>Firefox</h3>
					</div>
				</div>
				<div class="item">
					<img src="../../img/Safari.jpg" alt="Third slide">
					<div class="carousel-caption">
						<h3>Safari</h3>
					</div>
				</div>
				<div class="item">
					<img src="../../img/Opear.jpg" alt="Fourth slide">
					<div class="carousel-caption">
						<h3>Opear</h3>
					</div>
				</div>
				<div class="item">
					<img src="../../img/IE.jpg" alt="Fifth slide">
						<div class="carousel-caption">
						<h3>IE</h3>
					</div>
				</div>

			</div>

			<!-- Controls -->
			<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>

为了使得图片自适应页面：

		<style>
			.carousel-inner .item>img {
				/* 图片响应式 */
				width: 100%;
				height: 100%;

				/* 会导致父容器高度完全被图片撑开 */
			}

			#carousel-example-generic {
			
				height: 600px;
			}

			.item {
				height: 600px;
			}
		</style>

此时中间会产生一段空白可以使用将导航条浮动在上 

 重新设置：

margin-top: 50px;

	#carousel-example-generic {
				height: 400px;
				margin-top: 50px;
			}

data-interval=1000更改轮播速度

可以使用自定义参数

也可以使用jQuery

	var $a = $('.carousel');
				$a.carousel({
					//转动速度
					 interval: 1000
					
				});
				$('#btn').click(function(){
					//暂停
					$a.carousel('pause');
				})
				$('#btn2').click(function(){
					//循环
					$a.carousel('cycle');
				})