Bootstrap 滚屏

摘要:Bootstrap 滚屏(Carousel)软件是一种灵便的响应式的向站点加上导轨滑块的方法。此外,內容也是充足灵便的,能够是图象、嵌入架构、视頻或是别的您要想置放的一切种类的內容。假如...

Bootstrap 滚屏(Carousel)软件是一种灵便的响应式的向站点加上导轨滑块的方法。此外,內容也是充足灵便的,能够是图象、嵌入架构、视頻或是别的您要想置放的一切种类的內容。

假如您要想独立引入该软件的作用,那麼您必须引入 carousel.js。或是,如同 Bootstrap 软件概览 一章中常提及,您能够引入 bootstrap.js 或缩小版的 bootstrap.min.js。

下边是一个简易的幻灯片图片片,应用 Bootstrap 滚屏(Carousel)软件显示信息了一个循环系统播发原素的通用性部件。以便完成滚屏,您只必须加上含有该标识的编码就可以。不用应用 data 特性,只必须简易的根据 class 的开发设计就可以。

div id= myCarousel > 试着一下 »

結果以下所显示:

简单的轮播(Carousel)插件 可选择的题目

您能够根据 .item 内的 .carousel_caption 原素向幻灯片图片片加上题目。只必须在该点置放一切可选择的 HTML 就可以,它会全自动两端对齐并文件格式化。下边的案例演试了这一点:

div id= myCarousel > 试着一下 »

結果以下所显示:

轮播(Carousel)插件的标题
特性 data_slide 接纳重要字 prev 或 next,用于更改幻灯片图片片相对性于当今部位的部位。 应用 data_slide_to 来向滚屏传送一个初始拖动数据库索引,data_slide_to="2" 将把导轨滑块移动到一个特殊的数据库索引,数据库索引从 0 刚开始计数。 data_ride="carousel" 特性用以标识滚屏在网页页面载入时就刚开始动漫播发。
选择项名字种类/默认设置值Data 特性名字叙述 intervalnumber
默认设置值:5000data_interval全自动循环系统每一个新项目中间延迟时间的時间量。假如为 false,滚屏将不容易全自动循环系统。 pausestring
默认设置值:"hover"data_pause电脑鼠标进到时中止滚屏循环系统,电脑鼠标离去时修复滚屏循环系统。 wrapboolean
默认设置值:truedata_wrap滚屏是不是持续循环系统。
$('#identifier').carousel('pause') .carousel(number)循环系统滚屏到某一特殊的帧(从 0 刚开始计数,与数字能量数组相近)。
$('#identifier').carousel(number)
.carousel('prev')循环系统滚屏到上一个新项目。
$('#identifier').carousel('prev')
.carousel('next')循环系统滚屏到下一个新项目。
$('#identifier').carousel('next')

下边的案例演试了方式的使用方法:

div id= myCarousel 'cycle'); // 终止滚屏 $( .pause_slide ).click(function(){ $( #myCarousel ).carousel('pause'); // 循环系统滚屏到上一个新项目 $( .prev_slide ).click(function(){ $( #myCarousel ).carousel('prev'); // 循环系统滚屏到下一个新项目 $( .next_slide ).click(function(){ $( #myCarousel ).carousel('next'); // 循环系统滚屏到某一特殊的帧 $( .slide_one ).click(function(){ $( #myCarousel ).carousel(0); $( .slide_two ).click(function(){ $( #myCarousel ).carousel(1); $( .slide_three ).click(function(){ $( #myCarousel ).carousel(2); /script 试着一下 »

結果以下所显示:

轮播(Carousel)插件方法

下表列举了滚屏(Carousel)软件时要采用的恶性事件。这种恶性事件可在涵数中当勾子应用。

恶性事件叙述案例 slide.bs.carousel当启用 slide 案例方式时马上开启该恶性事件。
$('#identifier').on('slide.bs.carousel', function () {
 // 实行一些姿势...
slid.bs.carousel当滚屏进行幻灯片图片片衔接实际效果时开启该恶性事件。
$('#identifier').on('slid.bs.carousel', function () {
 // 实行一些姿势...

下边的案例演试了恶性事件的使用方法:



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:凡客快图