第十篇BootStrap轮播插件使用详解


Posted in Javascript onJune 21, 2016

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

使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js.

先给大家展示下效果图,如果大家感觉还不错,请参考实现代码。

效果图如下所示:

第十篇BootStrap轮播插件使用详解

关键代码如下:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!—轮播导航 -->
<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>
<!—轮播项目 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/images/Chrysanthemum.jpg" />
<div class="carousel-caption">
ffffffff
</div>
</div>
<div class="item">
<img src="~/images/Desert.jpg" />
<div class="carousel-caption">
xxxxxxxxxxxxxxxx
</div>
</div>
<div class="item">
<img src="~/images/Lighthouse.jpg" />
<div class="carousel-caption">
mmmmmmmmmmmm
</div>
</div>
</div>
<!—轮播导航 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></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"></span>
<span class="sr-only">Next</span>
</a>
</div>

以上所述是小编给大家介绍的第十篇BootStrap轮播插件使用详解的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
javascript实现点击小图显示大图
Nov 29 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 #Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 #Javascript
js简单判断flash是否加载完成的方法
Jun 21 #Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 #Javascript
JS实现获取剪贴板内容的方法
Jun 21 #Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 #Javascript
Javascript打印局部页面实例
Jun 21 #Javascript
You might like
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PDO::query讲解
2019/01/29 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
Python抽象类的新写法
2015/06/18 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
python制作抖音代码舞
2019/04/07 Python
python如何从文件读取数据及解析
2019/09/19 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
讲座主持词
2014/03/20 职场文书
青年标兵事迹材料
2014/08/16 职场文书
2015年暑期见闻
2015/07/14 职场文书
学雷锋感言
2015/08/03 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
合作协议书格式范本
2016/03/21 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python