基于Bootstrap的焦点轮播图


轮播图在各类网站上运用得非常广泛,有些效果非常流畅,华丽吸精,有些则不伦不类,轻重不分。

Bootstrap的轮播图继承了其强大的自适应性,在简洁、流畅上表现得尤其优秀。

下面是基于Bootstrap的焦点轮播图的源码结构,一目了然。

以上就是Bootstrap焦点轮播图的基本布局和样式,分成三个组成部分:carousel-innercarousel-indicatorscarousel-control

同时,可以对其每个部分的属性进行自定义。可自定义的属性有:data-ride='carousel'data-slide='prev|next'data-slide-to='3'data-interval='5000'data-pause="hover"data-wrap='true'。建议对 data-interval='5000'data-pause="hover"进行设定,控制每片幻灯片的播放时间以及暂停轮播的方式,这里使用的是5秒轮播和鼠标悬浮暂停播放,可以根据内容需要进行自定义优化。

另外,也可以使用javascript进行调用,一些常见的用法有:

可以结合Jquery进行定制,例如编写一个按钮组,可以控制幻灯片的播放。

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Both events have the following additional properties:

Event Type Description
slide.bs.carousel This event fires immediately when the slide instance method is invoked.
slid.bs.carousel This event is fired when the carousel has completed its slide transition.

Tips: