Bootstrap焦点轮播图
焦点轮播图
所谓的焦点轮播图就是,点击图片左右两边的箭头或者是下面的1、2、3、4、5、6的数字图标时,图片进行切换的效果。
基本用法
1.布局与样式
整个焦点轮播图由三部分组成,图片列表、小圆圈的列表、左右两个按钮。图片宽度默认是600x400的像素。
1)新建一个web项目ch28,将ch27的css、js、demo01.html等文件拷贝过来。再打开demo01.html将上节课在body里面写到的内容删除掉。
2)将桌面上准备好的三张图移动到ch28的img文件里面。
3)焦点轮播图的实例
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div data-ride="carousel" id="carousel_container" class="carousel slide">
//首先定义一个焦点图的容器,给这个容器一个id,在这个容器上一定要添加一个样式。
//另外,需要在最外层容器上要添加一个自定义属性data-ride="carousel"使得,页面加载完后马上开始图的轮播。
//注意:最外层是我们整个焦点图的容器!
<!--图片容器 -->
<div class="carousel-inner">
<div class="item"><img src="img/pic01.jpg"/></div>
<div class="item active"><img src="img/pic02.jpg"/></div>
<div class="item"><img src="img/pic03.jpg"/></div>
</div>
<!--小圆圈容器 -->
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel_container"></li>
//data-ride="carousel"在我们小圆圈容器的列表项上给
<li data-slide-to="1" data-target="#carousel_container"></li>
<li data-slide-to="2" data-target="#carousel_container"></li>
</ol>
<!--左右按钮容器 -->
<a href="#carousel_container" data-slide="prev" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
//可自己到bootstrap中文网的组件中选择想要的图标
</a>
<a href="#carousel_container" data-slide="next" class="right carousel-control">
//左右按钮的时候,要给定一个自己的属性叫data-slide和data-slide="prev"就是显示下一张和返回上一张。
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="col-md-9"></div>
</div>
4)运行效果
自定义属性
1.data-ride=’carousel’
在整个焦点图的容器上添加,表示页面加载完之后就开始轮播。
2.data-slide=’prev|next’
在左右按钮上添加可以给next和prev
3.data-slide-to=’3’
在小图标的每个选项上加它
4.data-interval=’5000’
自动循环时间,每隔多长时间切换一张图。
5.data-pause=”hover”
表示当鼠标移到这张图上的时候就不再进行轮播了,否则的话它自动的在切换。
6.data-wrap=’true’
是否持续循环
7.注意:上面的属性可以写在左右按钮上也可以写在最外层容器上
Javascript用法
1.$(‘.carousel’).carousel()
2..carousel(‘cycle’) 默认从左到右
3..carousel(‘pause’) 暂停
4..carousel(‘number’) 循环到number
5..carousel(‘prev’) 返回到前一张
6..carousel(‘next’) 转到下一张
7.我们可以在bootstrap的中文网站上查看详细的使用方法。
事件
1.slide.bs.carousel slide方法后,还未开始下张图。
2.Slide.bs.carousel 在一张图结束后
3.$(‘#myCarousel’).on(‘slide.bs.carousel’,
function(){
//do something...
})
4.我们可以在bootstrap的中文网站上查看详细的使用方法。
5.轮播图上显示标题
<div class="item">
<img src="img/pic01.jpg"/>
<div class="carousel-caption">
<h4>标题</h4>
<p>这里是内容。。。。。</p>
</div>
</div>
//做轮播图的时候一般不携带内容。
6.运行效果