Bootstrap 轮播图

<div class="container">
	<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="1000">
		<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>
		<div class="carousel-inner">
			<div class="item active">
				<img src="images/Chrysanthemum.jpg" />
				<div class="carousel-caption">
					文本1
				</div>
			</div>
			<div class="item">
				<img src="images/Lighthouse.jpg" />
				<div class="carousel-caption">
					文本2
				</div>
			</div>
			<div class="item">
				<img src="images/Penguins.jpg" />
				<div class="carousel-caption">
					文本3
				</div>
			</div>
		</div>
		<a class="carousel-control left" href="#myCarousel" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left"></span>
		</a>
		<a class="carousel-control right" href="#myCarousel" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right"></span>
		</a>
	</div>
</div>

.carousel-indicators     定义小圆点
.carousel 将插件整和起来
.slide 过渡效果
data-ride="carousel" 自动轮播
.carousel-inner .item 定义图片列表样式

.carousel-caption 添加内容

data-slide="prev" 跳到上一张

data-slide="next" 跳到下一张
data-slide-to="index" 移动到指定索引
通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。
属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播床底一个原始滑动索引,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。

data-interval="num" 轮播图切换时间
data-pause="hover"     鼠标移入时停止轮播
data-wrap="true"     无限循环
data-keyboard="true"


可以在图片切换时,绑定一些事件

$("#qq").on("slid.bs.carousel",function(){
alert("需要执行的代码")
})


猜你喜欢

转载自blog.csdn.net/qq_17550381/article/details/80529123