一.轮播

//基本实例。

<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"> <img src="yhmgc/img/1.jpg" alt="第一张"> </div>
<div class="item"> <img src="yhmgc/img/2.jpg" alt="第二张"> </div>
<div class="item"> <img src="yhmgc/img/3.jpg" alt="第三张"> </div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a> <a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>
</div>

data 属性解释:

1.data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置;

2.data-slide-to 来向轮播底部创建一个原始滑动索引,data-slide-to="2"将把滑 动块移动到一个特定的索引,索引从 0 开始计数。

3.data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放。

轮播插件有三个自定义属性:

如果在 JavaScript 调用就直接使用键值对方法,并去掉 data-;

//设置自定义属性

$('#myCarousel').carousel({
//设置自动播放/2 秒
interval : 2000,
//设置暂停按钮的事件
pause : 'hover',
//只播一次
wrap : false,
});

轮播插件还提供了一些方法,如下:

//点击按钮执行

$('button').on('click', function () {
//点击后,自动播放
$('#myCarousel').carousel('cycle');
//其他雷同
}

//事件

$('#myCarousel').on('slide.bs.carousel', function () {
alert('当调用 slide 实例方式时立即触发');
});
$('#myCarousel').on('slid.bs.carousel', function () {
alert('当轮播完成一个幻灯片触发');
});

Bootstrap 轮播插件的更多相关文章

  1. 第二百四十八节,Bootstrap轮播插件

    Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一.轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...

  2. 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  3. 第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  4. Bootstrap_让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    Bootstrap 的 carousel.js 插件并没有支持手势. 3种解决方案 : jQuery Mobile (http://jquerymobile.com/download/) $(&quo ...

  5. BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)

    原生的 Bootstrap 的 carousel.js 插件并没有支持手势,有下面3种解决方案 : 1. jQuery Mobile (http://jquerymobile.com/download ...

  6. Bootstrap轮播(carousel)插件中图片变形的终极解决方案——使用jqthumb.js

    在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本 ...

  7. Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  8. 使用BootStrap框架中的轮播插件

    在使用bootstrap框架中的轮播插件时,效果做出来后,无法通过点击小圆行的按钮来选择特定的图片. 后面发现是最开始的<div>标签中少写了一个id.一开始<div>标签是这 ...

  9. Bootstrap 轮播(Carousel)插件

    轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是非常灵活的.可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型. 下面是一个简单的幻灯片,使用轮播(carousel)插件显示 ...

随机推荐

  1. jquery toastr introduction

    1.资源 http://www.jq22.com/jquery-info476 http://www.jq22.com/yanshi476 Nuget Install-Package toastr 官 ...

  2. EF框架step by step(7)—Code First DataAnnotations(2)

    上一篇EF框架step by step(7)—Code First DataAnnotations(1)描述了实体内部的采用数据特性描述与表的关系.这一篇将用DataAnnotations描述一下实体 ...

  3. HDU5709 : Claris Loves Painting

    对于每个点维护两棵线段树$T1[x],T2[x]$: $T1[x]$维护$x$子树内,深度在$[l,r]$内的点数,同种颜色有多个的话,保留深度最小的那个. $T2[x]$维护$x$子树内每种颜色的最 ...

  4. 移动端HTML5资源整理

    目录 meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅 ...

  5. SphinxSE 一些SQL查询语句

    1.查询STRUCTURE_ID=106562并且COL1=2 或者 COL1=0 或者 COL2=2,对TS进行排序,从第10条开始取1000条. SELECT ID FROM T_RESOURCE ...

  6. poi excel导入

    poi.jar包 import java.io.File;import java.io.FileInputStream;import java.io.IOException; import org.a ...

  7. Compound Words

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=91209#problem/C 题意:   有一堆按照字典序排好的字符串,问你有多 ...

  8. 使用 CSS 去掉 iPhone 网页上按钮的超大圆角以及文本框圆角默认样式

    使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角且颜色由上而下渐变的样式,显得超级恶心,而且文本框也会有一定的圆角,但是我们自己定义 border-radius 也没有效果,经过搜 ...

  9. Listener监听器使用小案例

    这里介绍的就是一个客户流失监听器案例 新建一个监听器实现ServletContextListener接口 覆写contextDestroyed和contextInitialized 方法 packag ...

  10. Python之路(一)

    学了一整子python,目前看到了处理“列表”的地方,目前列表给我的感觉十分像数组,但不是java中的数组,更像是php中的数组. (1)创建列表的方法:列表名 = [列表项0,列表项1,······ ...