Bootstrap焦点轮播图

来源：互联网发布：如何下载plc编程软件编辑：程序博客网时间：2024/06/05 13:08

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>

//首先定义一个焦点图的容器，给这个容器一个id，在这个容器上一定要添加一个样式。

//另外，需要在最外层容器上要添加一个自定义属性data-ride="carousel"使得，页面加载完后马上开始图的轮播。

//注意：最外层是我们整个焦点图的容器！

</div>

//data-ride="carousel"在我们小圆圈容器的列表项上给

</ol>

//可自己到bootstrap中文网的组件中选择想要的图标

</a>

//左右按钮的时候，要给定一个自己的属性叫data-slide和data-slide="prev"就是显示下一张和返回上一张。

<spanclass="glyphicon glyphicon-chevron-right"></span>

</a>

</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.轮播图上显示标题

<p>这里是内容。。。。。</p>

</div>

//做轮播图的时候一般不携带内容。

6.运行效果

0 0