bootstrap 学习笔记 轮播(Carousel)插件
Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除些之外,内容也是足够灵活的,可以是图像,内嵌框架,视频或者其他您想要旋转的任何类型的内容。
示例:
下面是不念旧恶简单的幻灯片,使用bootstrap轮播carousel插件显示了一个循环播放元素的通用性组件。为了实现轮播,您只需要添加带有该标记的代码即可。不需要使用data属性,只需要简单的基于class的开发即可。
可选的标题
您可以通过item内的carousel-caption元素向幻灯片添加标题,只需要在该处放置任何可选的html即可,它会自动对齐并格式化。
<img alt="first" src="~/Images/02.png" />
<div class="carousel-caption">标题 2</div>
选项
有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:
选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
---|---|---|---|
interval | number 默认值:5000 |
data-interval | 自动循环每个项目之间延迟的时间量。如果为 false,轮播将不会自动循环。 |
pause | string 默认值:"hover" |
data-pause | 鼠标进入时暂停轮播循环,鼠标离开时恢复轮播循环。 |
wrap | boolean 默认值:true |
data-wrap | 轮播是否连续循环。 |
设置轮播时间间隔为2000ms.
$('#myCarousel1').carousel({
interval: 2000
});
全部html
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Scrollspy</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
<h2>Carousel</h2>
<div id="myCarousel1" class="carousel slide" data-interval="5000">
@*轮播指标*@
<ol class="carousel-indicators">
<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel1" data-slide-to="1"></li>
<li data-target="#myCarousel1" data-slide-to="2"></li>
<li data-target="#myCarousel1" data-slide-to="3"></li>
</ol>
@*轮播项目*@
<div class="carousel-inner">
<div class="item active">
<img alt="first" src="~/Images/01.png" />
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img alt="first" src="~/Images/02.png" />
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
<img alt="first" src="~/Images/03.png" />
<div class="carousel-caption">标题 3</div>
</div>
<div class="item">
<img alt="first" src="~/Images/04.png" />
<div class="carousel-caption">标题 4</div>
</div>
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel1"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel1"
data-slide="next">›</a>
<script>
$(function () {
$('#myCarousel1').carousel({
interval: 2000
});
})
</script>
</body>
</html>
本节完
bootstrap 学习笔记 轮播(Carousel)插件的更多相关文章
- Bootstrap 历练实例-轮播(carousel)插件的事件
事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...
- Bootstrap 历练实例-轮播(carousel)插件方法
方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...
- Bootstrap 轮播(Carousel)插件
轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是非常灵活的.可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型. 下面是一个简单的幻灯片,使用轮播(carousel)插件显示 ...
- 2.bootstrap练习笔记-轮播图
bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...
- JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...
- bootstrap学习笔记之四(javascript插件)
下面展现四个插件的用法,一般插件的功能可以用两种方法实现,一种是引入bootstrap.js后,通过添加data属性实现,另一种则是通过js代码是实现. 第一个插件:下拉菜单的实现 第一种方法:dat ...
- Bootstrap 学习笔记13 附加导航插件
附加导航代码: <style> a:focus { outline: none; } .nav-pills { width: 150px; } .nav-pills.affix { top ...
- Bootstrap 学习笔记7 模态框插件
网站弹出框使用: 基本使用: <!-- 模态框的声明 --> <div class="modal" id="myModal" tabindex ...
- 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
随机推荐
- 【二分】Defense Lines
[UVa1471] Defense Lines 算法入门经典第8章8-8 (P242) 题目大意:将一个序列删去一个连续子序列,问最长的严格上升子序列 (N<=200000) 试题分析:算法1: ...
- 【循环节】【矩阵乘法】MIPT-2016 Pre-Finals Workshop, Taiwan NTU Contest, Sunday, March 27, 2016 Problem F. Fibonacci of Fibonacci
题意:F(n)为斐波那契数列的第n项,问你F(F(n)) mod 20160519的值. 发现有循环节,F(26880696)=0,F(26880697)=1,.... 于是两次矩乘快速幂即可. #i ...
- TCP,UDP,IP总结
一.传输层的主要功能是什么? 分割并重新组装上层提供的数据流,为数据流提供端到端的传输服务. 二.传输层如何区分不同应用程序的数据流? 因为,对应传输层而言,它只需要知道目标主机上的哪个服务程序来响应 ...
- [转] javax.servlet.jar - jar not loaded问题解决
把那个jsp-api.jarservlet-api.jar删除即可! Details:把 webapps\maintenance\WEB-INF\lib\ 下面的 servlet-api.jar 删掉 ...
- KVC的用法
示例1:基本赋值取值 @interface Book : NSObject { NString *name;}@end #import "Book.h"@implement ...
- [典型漏洞分享]YS的防暴力破解设计存在缺陷
YS使用的防暴力破解机制存在缺陷,该缺陷可被用于暴力破解其它用户密码[高] 问题描述: YS在用户登录页面设置了验证码机制,当用户输入密码错误次数达到3次时,再次登录需要验证码以防止攻击者进行暴力破解 ...
- HDU 4655 Cut Pieces(2013多校6 1001题 简单数学题)
Cut Pieces Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total ...
- 深入解析SQL Server并行执行原理及实践
http://dbaplus.cn/news-21-431-1.html
- php判断手机客户端
<?php // check if wap function check_wap(){ if(stristr($_SERVER['HTTP_VIA'],"wap")){// ...
- 折腾mysql的小坑记录
1.安装 CentOS下先卸载自带的mariadb rpm -qa | grep mariadb mariadb-libs--.el7_2.x86_64 mariadb--.el7_2.x86_64 ...