Bootstrap 我的学习记录4 轮播图的使用和理解
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 轮播图</title>
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> <style>
img {
width: 100%;
height: 100%;
}
p {
text-align: center;
}
</style>
</head>
<body>
<!-- 轮播图部分 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- 指示器 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides -->
<!-- 包裹幻灯片 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="data:images/轮播1.png" alt="轮播图1">
<div class="carousel-caption">
轮播图1
</div>
</div>
<div class="item">
<img src="data:images/轮播2.png" alt="轮播图2">
<div class="carousel-caption">
轮播图2
</div>
</div>
<div class="item">
<img src="data:images/轮播3.png" alt="轮播图3">
<div class="carousel-caption">
轮播图3
</div>
</div>
<p>轮播图尝试</p>
</div> <!-- Controls -->
<!-- 控制 -->
<!-- 向左滑动 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></span>
<span class="sr-only">Previous</span>
</a>
<!-- 向右滑动 -->
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- js控制轮播图 -->
<button id="prev">向前</button>
<button id="next">向后</button>
<button id="pause">停止</button>
<button id="start">开始</button>
<button id="jump">到第二张</button> <script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!-- 轮播图还支持js控制 -->
<script>
$(function(){
$('.carousel').carousel({
interval: 2000,//轮播间隔
pause:"hover", //鼠标悬停在轮播图上，是否停止滚动
wrap:true, //
keyboard:true //响应键盘事件
}); $("#prev").click(function(event) {
$('.carousel').carousel('prev')// 周期上一个项目。
}); $("#next").click(function(event) {
$('.carousel').carousel('next')// 周期到下一个项目。
});; $("#pause").click(function(event) {
$('.carousel').carousel('pause')// 从通过项目循环停止传送带。
});; $("#start").click(function(event) {
$('.carousel').carousel('cycle')// 通过传送带项目周期从左到右。
});; $("#jump").click(function(event) {
$('.carousel').carousel(1)// 循环传送带到一个特定的帧（0为主，类似于数组）。
});; });
</script>
</body>
</html>
注意引入.css和.js 文件查看效果（里面有三张图片，随便找几张代替便可）
Bootstrap 我的学习记录4 轮播图的使用和理解的更多相关文章
- BootStrap学习(7)_轮播图
一.轮播图 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果 ...
- 使用bootstrap建立响应式网页——通栏轮播图（carousel）
1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...
- Bootstrap 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- 6_bootstrap之导航条|轮播图|排版|表单元素|分页
8.导航条 BootStrap已经提供了完整的导航条实例,通常情况下,我们仅需进行简单修改即可使用. 帮助手册位置:组件-------导航条 9.轮播图 BootStrap已经提供了完整的轮播图实例, ...
- jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验
jQuery---bootstrap的下载使用,栅格(12个格子),轮播图,矢量图字体图标,进度条,选项卡,标签,表达校验 一丶bootstrap的使用 下载资源文件: bootstrap官网 导入 ...
- <day006>bootstrap的简单学习 + 轮播图
任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...
- BootStrap学习(三)——重写首页之导航栏和轮播图
1.按钮 1)帮助文档:http://v3.bootcss.com/css/#buttons 2).btn-lg..btn-sm..btn-xs可以设置按钮的不同尺寸 3).active类设置按钮的激 ...
- Bootstrap 学习笔记 项目实战 响应式轮播图
左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...
随机推荐
- 多个Storyboard的使用
创建一个Storyboard工程 storyboard是在ios5中引入的新控件,能够更加清晰.简单的整合多个ViewController的关系,下面主要介绍一下怎么初建一个storyboard的工程 ...
- 使用Merge Into 语句实现 Insert/Update
网址: http://www.eygle.com/digest/2009/01/merge_into_insertupdate.html 动机: 想在Oracle中用一条SQL语句直接进行Insert ...
- winform 指定浏览器打开链接
Process myProcess = new Process(); myProcess.StartInfo.FileName = "firefox.exe";//&quo ...
- JavaScript Scoping and Hoisting
JavaScript中所有变量及函数名会自动提升 http://www.cnblogs.com/betarabbit/archive/2012/01/28/2330446.html
- `cocos2dx非完整` 添加xxtea加密模块
在上一篇文章中,我已经开始着手写自己的模块,也就是fw部分.其中上一篇文章中完成的是lua部分的配置解析部分,涉及一点点平台方面的封装.这一片文章我来说明一下我是如何处理cocos2dx资源加密的.首 ...
- JavaScript的学习--正则表达式
今天用正则表达式的时候遇到了不少问题,就研究了一下,参考了不少博客,特此记录. 正则表达式的参数 参考 /i (忽略大小写)/g (全文查找出现的所有匹配字符)/m (多行查找)/gi(全文查找 ...
- Java Garbage Collection Basics--转载
原文地址:http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/gc01/index.html Overview Purpose ...
- CentOS 7.2 MySQL 5.7 主从配置
MySQL的安装:CentOS 7.2 yum方式安装MySQL 5.7 两台服务器分别如下: Master:192.168.1.100 Slave:192.168.1.101 Master配置: 编 ...
- Slip.js – 在触摸屏上实现列表的滑动排序功能
Slip.js 是一个很小的 JavaScript 库,用于实现对触摸屏的互动 Swipe 和对元素重新排序列表(Reordering).Slip.js 没有任何的依赖,你可以通过自定义 DOM 事件 ...
- IconVault – 创建自定义图标字体的神器推荐
图标字体简单来说就是外观呈现为图标的字体,同时具有矢量图形的特征,在不同的设备上使用图标的时候就不用加载不同尺寸的图片文件,能够减少 HTTP 请求数,提高页面加载速度. IconVault 这款在线 ...