SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<meta charset="utf-8"> 
	<title>桌游文化</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
	<!-- 轮播（Carousel）指标 -->
	<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）项目 -->
	<div class="carousel-inner">
		<div class="item active">
		<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
		</div>
		<div class="item">
		<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
		</div>
		<div class="item">
		<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
	<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

<!-- 控制按钮 -->

<div style="text-align:center;">
	<input type="button" class="btn start-slide" value="Start">
	<input type="button" class="btn pause-slide" value="Pause">
	<input type="button" class="btn prev-slide" value="Previous Slide">
	<input type="button" class="btn next-slide" value="Next Slide">
	<input type="button" class="btn slide-one" value="Slide 1">
	<input type="button" class="btn slide-two" value="Slide 2">
	<input type="button" class="btn slide-three" value="Slide 3">
</div>
<script>
	$(function(){
		// 初始化轮播
		$(".start-slide").click(function(){
			$("#myCarousel").carousel('cycle');
		});
		// 停止轮播
		$(".pause-slide").click(function(){
			$("#myCarousel").carousel('pause');
		});
		// 循环轮播到上一个项目
		$(".prev-slide").click(function(){
			$("#myCarousel").carousel('prev');
		});
		// 循环轮播到下一个项目
		$(".next-slide").click(function(){
			$("#myCarousel").carousel('next');
		});
		// 循环轮播到某个特定的帧 
		$(".slide-one").click(function(){
			$("#myCarousel").carousel(0);
		});
		$(".slide-two").click(function(){
			$("#myCarousel").carousel(1);
		});
		$(".slide-three").click(function(){
			$("#myCarousel").carousel(2);
		});
	});
</script>

            
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
.carousel-caption {
  z-index: 10;
}
.carousel .item {
  height: 500px;
  background-color: black;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
  image-
}