在bootstrap栅格系统中实现图片轮播效果

作者(出处):百宝箱工作室发布时间:2018年4月17日 21:14:43查阅量:134

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<title></title>
		<style>
			#pics a{ display: block;  width: 50px;  padding-top: 210px;}
		</style>
	</head>
	<body>
	<!--
        	作者:百宝箱工作室      微课堂教学QQ:425680248
        	时间:2018-04-17
        	描述:图片轮播效果
        	第1步:在一个父级div里面放一个id和一个carousel的class。
        		slide			给图片添加运动的效果
        		data-interval="500"	图片展示时间,按毫秒计算,也叫间隔时间,其值低于400容易出问题
        		data-ride="carousel"	浏览器加载网页就开始播放
        	第2步:小圆点用ol标签实现,ol标签里面放一个class,其值为carousel-indicators。
        	第3步:图片区域要放在一个class为carousel-inner的div标签里面。
        	        每一项图片内容都需要放到一个class为item的div标签里面。
        		图片后面也可以放文字内容,文字内容要放在一个父级div里面,父级div的class为carousel-caption
        	第4步:实现左右按钮的a标签,里面的href值要指向父级的id值,这里实际就是锚点。
        -->
		<div class="container">
			<!--父级标签放一个id和一个class,class的值为carousel-->
			<div id="pics" class="carousel slide" data-interval="2000" data-ride="carousel">
				<!--ol是小圆点的标签-->
				<ol class="carousel-indicators">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ol>
				<!--轮播图的图片区域-->
				<div class="carousel-inner">
					<div class="item active">
						<img src="img/10.jpg" />
						<div class="carousel-caption">
							<h3>这里是标题1</h3>
							<p>这是内容1</p>
						</div>
					</div>
					<div class="item">
						<img src="img/11.jpg" />
						<div class="carousel-caption">
							<h3>这里是标题2</h3>
							<p>这是内容2</p>
						</div>
					</div>
					<div class="item">
						<img src="img/10.jpg" />
						<div class="carousel-caption">
							<h3>这里是标题3</h3>
							<p>这是内容3</p>
						</div>
					</div>
					<div class="item">
						<img src="img/11.jpg" />
						<div class="carousel-caption">
							<h3>这里是标题4</h3>
							<p>这是内容4</p>
						</div>
					</div>
				</div>
				<!--左右按钮-->
				<a href="#pics" class="carousel-control left" data-slide="prev">&laquo;</a>
				<a href="#pics" class="carousel-control right" data-slide="next">&raquo;</a>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2018
点击这里给我发消息