BootStrap JS插件轮播效果案例详解

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的。

情况

下面显示了这个插件和相关组件的转盘案例。

div id=' carousel-example-generic ' class=' carousel slide ' data-ride=' carousel '！-指示器-ol class=' carousel-Indicators ' Li data-target=' # carousel-example-generic ' data-slide-to=' 0 ' class=' active '/Lili data-target=' # carousel-example-generic ' data-slide-to=' 2 '/Li/ol！-幻灯片的包装-div class=' carousel-inner ' div class=' item active ' img src=' http :alt='.div class='转盘-标题'./div/div./div！-Controls-a class=' left carousel-control ' href=' # carousel-example-generic ' data-slide=' prev ' span class=' glyphicon glyphicon-chevron-left '/span/AA class=' right carousel-control ' href=' # carousel-example-generic ' data-slide=' next ' span class=' glyphicon glyphicon-chevron-right '/span/a/div Internet Explorer 8 9不支持过渡动画效果。

Bootstrap基于CSS3实现动画效果，但Internet Explorer 8 9不支持这些必要的CSS属性。因此，在使用这两种浏览器时，过渡动画效果将会丢失。此外，我们不打算使用基于jQuery的替代函数。

可选选项

您可以通过添加来为每张幻灯片添加标题。旋转木马-任何标题。项目。您还可以添加任何HTML代码，这些代码将被自动排列和格式化。

900x500

div class=' item active ' img src=' http : 'alt=' . 'H3./h3p./p/div/div无障碍问题。

转盘组件与可访问性标准不兼容。如果需要兼容性，请考虑其他幻灯片放映方案。

使用

带有数据属性。

转盘的位置可以通过数据属性轻松控制。数据幻灯片可以接受控制播放位置的上一个或下一个关键词。此外，您还可以将从0开始的幻灯片下标通过data-slide-to传递。

属性data-ride='carousel '用于标记页面加载后启动的carousel组件。

用JavaScript。

手动启动转盘组件：

复制代码如下：$('。转盘’)。转盘()。

选择权

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

名称默认值描述了间隔编号为5000的幻灯片旋转的等待时间。如果为假，转盘将不会自动开始循环。暂停字符串“悬停”当鼠标停留在幻灯片区域时暂停转盘，当鼠标离开时启动转盘。无论转盘是否继续循环，Wrap boolean为true。方法。转盘(选项)

初始化转盘组件，接受对象类型的可选选项参数，并开始滑动循环。

$ ('.转盘’)。转盘({间隔： 2000})。转盘(“循环”)从左到右循环每个帧。转盘(“暂停”)

停止旋转木马。转盘(编号)

将转盘定位到指定的帧(帧下标从0开始，类似于数组)。转盘(“上一个”)

回到上一帧。旋转木马(“下一个”)

转到下一帧。

事件

Bootstrap的轮播组件公开了两个监听事件。

此事件在调用slide方法后立即开始。Slid.bs .播放所有幻灯片时会触发转盘。$(“#我的转盘”)。on ('slide.bs.carousel '，function(){//做某事.})以上是基于边肖介绍的JS插件制作BootStrap轮播效果案例的相关知识，希望对大家有所帮助！