bootstrap网页轮播图实例

<!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">
		<title>轮播图</title>
		<link rel="stylesheet" href="css/bootstrap.css" >
	<style>
		.col-xs-1,.col-xs-2,.col-xs-3,
		.col-xs-4,.col-xs-5,.col-xs-6,
		.col-xs-7,.col-xs-8,.col-xs-9,
		.col-xs-10,.col-xs-11,.col-xs-12{
			padding: 0px;
			margin: 0px;
		}
		
		.carousel-control {
   
         top: 25%;
         font-size: 50px;
}
		h4{
			color: red;
		}
	</style>
	</head>
	<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	<body>
		<!--
			1.写一个父级,放一个id 和一个carouse的class 
			data-ride ="carousel"(负责轮播图的开始页 自动轮播)
			data-interval="false" 选项-间隔   如果为假,轮播图转盘将不会自动循环
			data-pause="hover" : 表示暂停《默认),鼠标移上去暂停到当前幻灯灯片,还有false属性
		-->
		<div class="container">
			 <!--<div id="pic" class="row carousel  slide"  data-interval="false" data-ride="carousel" data-pause="hover" >-->
			 <div id="pic" class="row carousel  slide" data-interval="2000" data-ride ="carousel" data-pause="hover">
			 	    <div class="col-xs-12">
					 	<!--小圆点-->
					 	<ol class="carousel-indicators">
					 		<li class="active"></li>
					 		<li></li>
					 		<li></li>
					 		<li></li>
					 	</ol>
					 	
			 	
					 	<!--轮播图的图片-->
					 	<div class="carousel-inner">
					 		<div class="active item">
					 			<img src="img/zhutu/1.png"  class="img-responsive"/>
					 			<div class="carousel-caption">
					 				<h4>1</h4>
					 			</div>
					 		</div>
					 		<div class="item">
					 			<img src="img/zhutu/2.png" class="img-responsive"/>
					 			<div class="carousel-caption">
					 				<h4>2</h4>
					 			</div>
					 		</div>
					 		<div class="item">
					 			<img src="img/zhutu/3.png" class="img-responsive"/>
					 			<div class="carousel-caption">
					 				<h4>3</h4>
					 			</div>
					 		</div>
					 		<div class="item">
					 			<img src="img/zhutu/4.png" class="img-responsive"/>
					 			<div class="carousel-caption">
					 				<h4>4</h4>
					 			</div>
					 		</div>
					 		
					 	</div>
					 	
					 	<!--左右按钮-->
					 	<a href="#pic" class="carousel-control left align-items-center" data-slide="prev" >&lsaquo;</a>
					 	<a href="#pic" class="carousel-control right" data-slide="next" >&rsaquo;</a>
					</div>	
					 	
			 </div>
			 
		</div>
		
		
	</body>
</html>

你可能感兴趣的:(bootstrap,前端,javascript)