Bootsrap之轮播图

轮播图

<div id="myCarousel" class="carousel slide" data-ride="carousel">
	<!-- 轮播（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="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div> 

data-ride="carousel",表示轮播在页面加载时，自动播放动画，如果不写该属性，图片不会进行移动，可以在js中添加$('.carousel').carousel()来代替该属性，此时轮播自动进行动画。

data-interval=1000，表示自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。他只是表示间隔时间，并不能表示是否自动轮播，data-interval=1000使用的前提是轮播图自动轮播，所以要和data-ride="carousel"属性一起使用，

两个属性一起使用时，表示自动轮播，时间间隔1s，也可以用

$('.carousel').carousel({
    interval: 1000
})

代替上面的两个属性。