html图片随圆点下标轮播,html滚动轮播实现

类似于这样的滚动轮播要如何实现呢？

由于最近项目用到，所以总结一下自己学到的知识：

滚动需要用到js，这里只需要调用bootstrap封装好的js文件即可。

用到html代码如下：

...

...

通过data属性调用

通过data属性可以很容易的控制轮播的定位。data-slide可以接受控制播放位置的prev或next关键字。另外，还可以通过data-slide-to传递以0开始的幻灯片下标。

data-ride="carousel"属性用来标记在页面加载之后即开始启动的轮播组件。

通过JavaScript

手动启动轮播组件：

$('.carousel').carousel()

选项

可以将选项通过data属性或JavaScript传递。对于data属性，需要将选项名称放到data-之后，例如data-interval=""。

名称

类型

默认值

描述

interval

number

5000

幻灯片轮换的等待时间。如果为false，轮播将不会自动开始循环。

pause

string

"hover"

鼠标停留在幻灯片区域即暂停轮播，鼠标离开即启动轮播。

wrap

boolean

true

轮播是否持续循环。

方法

.carousel(options)

初始化轮播组件，接受一个可选的object类型的options参数，并开始幻灯片循环。

$('.carousel').carousel({

interval: 2000

})

.carousel('cycle')

从左到右循环各帧。

.carousel('pause')

停止轮播。

.carousel(number)

将轮播定位到指定的帧上(帧下标以0开始，类似数组)。

.carousel('prev')

返回到上一帧。

.carousel('next')

转到下一帧。

事件

Bootstrap的轮播组件暴露了两个事件用于监听。

事件类型

描述

slide.bs.carousel

此事件在slide方法被调用之后立即出发。

slid.bs.carousel

当所有幻灯片播放完之后被触发。

$('#myCarousel').on('slide.bs.carousel', function() {

// do something…

})