效果:

Bootstrap 图片自动轮播

源码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		.carousel-inner img{
								margin: 0 auto;
 								width:1200px; 
								high:200px;
							}
							
	</style>
</head>
<body>
	<div id="myCarousel" class="carousel slide">
	  <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>
	  <!-- Carousel items -->
	  <div class="carousel-inner">
	    <div class="active item">
	    	<img src="img/0.jpg" alt="第一张" />
	    </div>
	    <div class="item">
	    	<img src="img/1.jpg" alt="第二张" />
	    </div>
	    <div class="item">
	    	<img src="img/2.png" alt="第三张" />
	    </div>
	  </div>
	  <!-- Carousel nav -->
	  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
	  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
	</div>

	<script src="js/jquery-1.12.4.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" >
		$('.carousel').carousel({
			  interval: 2000
			})
	</script>
</body>
</html>

 

相关文章: