首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap基本插件学习笔记之轮播幻灯片(23)

Posted in Javascript onDecember 08, 2016

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。

0x01 基本实例

Bootstrap实现轮播幻灯片的效果，只需要简单地使用class开发就可以了：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>轮播幻灯片</title>
</head>
<body>
<div class="container col-md-4 col-md-offset-4">
 <div id="myCarouel" class="carousel slide">
 <!--幻灯片切换指标-->
 <ol class="carousel-indicators">
  <li data-toggle="#myCarouel" data-slide-to="0" class="active"></li>
  <li data-toggle="#myCarouel" data-slide-to="1"></li>
  <li data-toggle="#myCarouel" data-slide-to="2"></li>
 </ol>
 <!--幻灯片项目-->
 <div class="carousel-inner">
  <div class="item active">
  <img src="../../img/slide1.png" alt="项目1">
  </div>
  <div class="item">
  <img src="../../img/slide2.png" alt="项目2">
  </div>
  <div class="item">
  <img src="../../img/slide3.png" alt="项目3">
  </div>
 </div>
 <!--幻灯片导航-->
 <a class="carousel-control left" href="#myCarouel" data-slide="prev"><<<</a>
 <a class="carousel-control right" href="#myCarouel" data-slide="next">>>></a>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本插件学习笔记之轮播幻灯片(23)

几点说明：

（1）属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
（2）使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
（3）data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。

0x02 添加标题

可以通过.item内的.carousel-caption 元素向幻灯片添加标题：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>添加标题</title>
</head>
<body>
<div class="container col-md-4 col-md-offset-4">
 <div id="myCarouel" class="carousel slide">
 <!--幻灯片切换指标-->
 <ol class="carousel-indicators">
  <li data-toggle="#myCarouel" data-slide-to="0" class="active"></li>
  <li data-toggle="#myCarouel" data-slide-to="1"></li>
  <li data-toggle="#myCarouel" data-slide-to="2"></li>
 </ol>
 <!--幻灯片项目-->
 <div class="carousel-inner">
  <div class="item active">
  <img src="../../img/slide1.png" alt="项目1">
  <div class="carousel-caption">标题1</div>
  </div>
  <div class="item">
  <img src="../../img/slide2.png" alt="项目2">
  <div class="carousel-caption">标题2</div>
  </div>
  <div class="item">
  <img src="../../img/slide3.png" alt="项目3">
  <div class="carousel-caption">标题3</div>
  </div>
 </div>
 <!--幻灯片导航-->
 <a class="carousel-control left" href="#myCarouel" data-slide="prev"><<<</a>
 <a class="carousel-control right" href="#myCarouel" data-slide="next">>>></a>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本插件学习笔记之轮播幻灯片(23)

0x03 JS切换

还可以利用JS来实现幻灯片的切换。下面添加一些按钮来实现幻灯片的控制：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>JS切换</title>
</head>
<body>
<div class="container col-md-6 col-md-offset-3">
 <div id="myCarouel" class="carousel slide">
 <!--幻灯片切换指标-->
 <ol class="carousel-indicators">
  <li data-toggle="#myCarouel" data-slide-to="0" class="active"></li>
  <li data-toggle="#myCarouel" data-slide-to="1"></li>
  <li data-toggle="#myCarouel" data-slide-to="2"></li>
 </ol>
 <!--幻灯片项目-->
 <div class="carousel-inner">
  <div class="item active">
  <img src="../../img/slide1.png" alt="项目1">
  <div class="carousel-caption">标题1</div>
  </div>
  <div class="item">
  <img src="../../img/slide2.png" alt="项目2">
  <div class="carousel-caption">标题2</div>
  </div>
  <div class="item">
  <img src="../../img/slide3.png" alt="项目3">
  <div class="carousel-caption">标题3</div>
  </div>
 </div>
 <!--幻灯片导航-->
 <a class="carousel-control left" href="#myCarouel" data-slide="prev"><<<</a>
 <a class="carousel-control right" href="#myCarouel" data-slide="next">>>></a>
 <!--控制按钮-->
 <div style="text-align: center">
  <button type="button" class="btn start-slide">开始切换</button>
  <button type="button" class="btn pause-slide">终止切换</button>
  <button type="button" class="btn prev-slide">前一个幻灯</button>
  <button type="button" class="btn next-slide">后一个幻灯</button>
  <button type="button" class="btn slide-1">幻灯1</button>
  <button type="button" class="btn slide-2">幻灯2</button>
  <button type="button" class="btn slide-3">幻灯3</button>
 </div>
 </div>
</div>
<script>
 $(function () {
 //启动轮播
 $(".start-slide").click(function () {
  $("#myCarouel").carousel('cycle');
 })
 //终止轮播
 $(".pause-slide").click(function () {
  $("#myCarouel").carousel('pause');
 })
 //前一个幻灯
 $(".prev-slide").click(function () {
  $("#myCarouel").carousel('prev');
 })
 //下一个幻灯
 $(".next-slide").click(function () {
  $("#myCarouel").carousel('next');
 })
 //切换到指定的幻灯
 $(".slide-1").click(function () {
  $("#mycarouel").carousel(0);
 })
 $(".slide-2").click(function () {
  $("#mycarouel").carousel(1);
 })
 $(".slide-3").click(function () {
  $("#mycarouel").carousel(2);
 })
 })
</script>
</body>
</html>

效果如下：

Bootstrap基本插件学习笔记之轮播幻灯片(23)

0x04 事件

同样地，Carousel也定义了一些事件：

（1）slide.bs.carousel
当调用 slide 实例方法时立即触发该事件：

$('#mycarouel').on('slide.bs.carousel', function () {
 // 执行一些动作...
})

（2）slid.bs.carousel
当轮播完成幻灯片过渡效果时触发该事件：

$('#mycarouel').on('slid.bs.carousel', function () {
 // 执行一些动作...
})

看下面的例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>事件</title>
</head>
<body>
<div class="container col-md-4 col-md-offset-4">
 <div id="myCarouel" class="carousel slide">
 <!--幻灯片切换指标-->
 <ol class="carousel-indicators">
  <li data-toggle="#myCarouel" data-slide-to="0" class="active"></li>
  <li data-toggle="#myCarouel" data-slide-to="1"></li>
  <li data-toggle="#myCarouel" data-slide-to="2"></li>
 </ol>
 <!--幻灯片项目-->
 <div class="carousel-inner">
  <div class="item active">
  <img src="../../img/slide1.png" alt="项目1">
  </div>
  <div class="item">
  <img src="../../img/slide2.png" alt="项目2">
  </div>
  <div class="item">
  <img src="../../img/slide3.png" alt="项目3">
  </div>
 </div>
 <!--幻灯片导航-->
 <a class="carousel-control left" href="#myCarouel" data-slide="prev"><<<</a>
 <a class="carousel-control right" href="#myCarouel" data-slide="next">>>></a>
 </div>
</div>
<script>
 $(function () {
 $("#myCarouel").on('slide.bs.carousel',function () {
  alert('切换幻灯');
 });
 })
</script>
</body>
</html>

效果如下：

Bootstrap基本插件学习笔记之轮播幻灯片(23)

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap基本插件学习笔记之轮播幻灯片(23)

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 行级解析读取XML文件（附源码）
Oct 12 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
js实现动态时钟
Mar 12 Javascript
JS生成和下载二维码的代码
Dec 07 #Javascript
获取select的value、text值的简单示例（jquery与javascript）
Dec 07 #Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 #Javascript
DropDownList实现可输入可选择（两种版本可选）
Dec 07 #Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 #Javascript
利用jquery实现验证输入的是否是数字、小数，包含保留几位小数
Dec 07 #Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 #Javascript
.NET面试题(131) Javascript面试题(44) 软件工程师面试题(40) 软件测试工程师面试题(53) PYTHON面试题(27) EJB面试题(46) LINUX面试题(83) 网络工程师面试题(96) C#面试题(90) Oracle面试题(81)
You might like
Smarty Foreach 使用说明
2010/03/23 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
分享JS表单验证源码（带错误提示及密码等级）
2020/01/05 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
python小技巧之批量抓取美女图片
2014/06/06 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python requests上传文件实现步骤
2020/09/15 Python
HTML5 Notification（桌面提醒）功能使用实例
2014/03/17 HTML / CSS
上课玩手机检讨书
2014/02/08 职场文书
公司离职证明范本
2014/10/17 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
债务纠纷代理词
2015/05/25 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL