方法

下面是一些轮播（Carousel）插件中有用的方法：

方法 描述 实例
.carousel(options) 初始化轮播为可选的 options 对象，并开始循环项目。 
$('#identifier').carousel({

  interval: 2000

})
.carousel('cycle') 从左到右循环轮播项目。 
$('#identifier').carousel('cycle')
.carousel('pause') 停止轮播循环项目。 
$('#identifier')..carousel('pause')
.carousel(number) 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 
$('#identifier').carousel(number)
.carousel('prev') 循环轮播到上一个项目。 
$('#identifier').carousel('prev')
.carousel('next') 循环轮播到下一个项目。 
$('#identifier').carousel('next')

实例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap 历练实例-轮播(carousel)插件方法</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<div class="carousel slide"id="myCarousel">
<!--轮播(carousel)指针-->
<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>
<!--轮播(carousel)项目-->
<div class="carousel-inner">
<div class="item active">
<img src="Images/slide1.png"alt="First slide" />
</div>
<div class="item">
<img src="Images/slide2.png"alt="Second slide" />
</div>
<div class="item">
<img src="Images/slide3.png" />
</div>
</div>
<!--轮播(Carousel)导航-->
<a href="#myCarousel"class="carousel-control left"data-slide="prev">&lsaquo;</a>
<a href="#myCarousel"class="carousel-control right"data-slide="next">&rsaquo;</a>
</div>
<!--控制按钮-->
<div style="text-align:center">
<input type="button"class="btn start-slide"value="start" />
<input type="button"class="btn pause-slide"value="pause" />
<input type="button"class="btn prev-slide" value="prev"/>
<input type="button"class="btn next-slide"value="next" />
<input type="button"class="btn slide-one"value="slideOne" />
<input type="button"class="btn slide-two"value="slideTwo" />
<input type="button"class="btn slide-three"value="slideThree" />
</div>
</div>
<script>
$(document).ready(function () {
$(".start-slide").click(function () {
$("#myCarousel").carousel("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>
</body>
</html>

Bootstrap 历练实例-轮播(carousel)插件方法的更多相关文章

  1. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  2. Bootstrap 轮播(Carousel)插件

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

  3. Bootstrap历练实例：按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

  4. bootstrap 学习笔记 轮播（Carousel）插件

    Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除些之外,内容也是足够灵活的,可以是图像,内嵌框架,视频或者其他您想要旋转的任何类型的内容. 示例: 下面是不念 ...

  5. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. Bootstrap 历练实例 - 折叠（Collapse）插件方法

    方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...

  7. Bootstrap历练实例：警告框(Alert)插件的方法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. Bootstrap历练实例：popover插件中的方法

    方法 下面是一些弹出框(Popover)插件中有用的方法: 方法 描述 实例 Options: .popover(options) 向元素集合附加弹出框句柄. $().popover(options) ...

  9. Bootstrap历练实例：下拉菜单插件方法的使用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. Shell操作相关的快捷键 --Linux

    一.shell和bash shell --unix --Bourne shell ,bash --linux --Bourne again shell.bash (GNU Bourne-Again S ...

  2. mac上gradle升级版本

    参考:https://www.jianshu.com/p/9fa9d2b4dbc9    http://www.gradle.org/downloads下载gradle 终端输入:open .bash ...

  3. 使用jmeter往指定文件中插入一定数量的数据(转)

    有一个需求,新建一批账号,把获取的账号相关信息存入文本文件,当文本文件保存的数据达到一定的数量,就自动停止新建账号. 分析下需求: 1.把账号信息保存到文件,需要使用bean shell脚本(bean ...

  4. 使用Collectd + InfluxDB + Grafana进行JMX监控

    我们已经看到使用Collectd监控CPU /内存利用率(本文).但它没有提供所有信息来确定性能问题的瓶颈.在本文中,我们将使用Collectd Java插件来使用其JMX技术来监视和管理Java虚拟 ...

  5. POJ1027 The Same Game

    题目来源:http://poj.org/problem?id=1027 题目大意: 题目说的就是现在蛮流行的手机小游戏popstar,求用贪心方法能得到多少分. 小球有三种颜色:R/G/B.横向.纵向 ...

  6. Luogu P4161 [SCOI2009]游戏 数论+DP

    ywy神犇太巨辣!!一下就明白了!! 题意:求$lcm(a_1,a_2,...,a_k)$的种类,其中$\Sigma\space a_i <=n$,$a_i$相当于环长 此处的$DP$,相当于是 ...

  7. 74th LeetCode Weekly Contest Valid Number of Matching Subsequences

    Given string S and a dictionary of words words, find the number of words[i] that is a subsequence of ...

  8. 73th LeetCode Weekly Contest Escape The Ghosts

    You are playing a simplified Pacman game. You start at the point (0, 0), and your destination is(tar ...

  9. 练习十八：求这样的一组数据和，s=a+aa+aaa+aaaa+aa...a,其中a为一个数字

    例如:2+22+222+2222+22222(此时共有5个数字相加),这里具体几个数字由键盘控制 方法一:普通做法 a = int(input("计算要加的数(1-9之间数):") ...

  10. linux目录权限

    linux中,有三种不同类型的用户可以对文件或目录进行访问:文件所有者,同组用户,其他用户.所有者一般是文件的创建者,文件所有者自动拥有对该文件的读.写和可执行权限.所有者能允许同组用户有权访问文件, ...