通过BootStrap实现轮播图的实际应用


Posted in Javascript onSeptember 26, 2016

 我是用bootstrap来做的很简单

通过BootStrap实现轮播图的实际应用

直接把那坨代码复制到 webstorm里面

下面我会用我的某一次作业 来做实际解释里面的某部分各代表什么意思

(由于这个代码到底什么意思 老师没有教过 我自行理解 有错的地方 望海涵)

通过BootStrap实现轮播图的实际应用

“男友秋装上新”这个地方 就是个轮播 一共3个小点 也就是三张图 可通过左右的箭头 左右翻动

接下来 奉上源代码:并在代码后给各部分做出解释

<div class="col-md-9 lunbo"> 
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top: 1.4285rem">  
 <!-- Indicators -->  
 <ol class="carousel-indicators" style="margin-left: -20rem">   
 <li data-target="#carousel-example-generic" data-slide-to="0" class="active">
 </li>  
 这里规定播放顺序 3个li代表3个小点 点一个小点 就是一张图   
 <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"> 这里是要播放的图 3张   
 <div class="item active">这里的active 对应上面active的那个小圆点    
 <img src="三组项目/PC/PC首页/lunbo1.jpg" alt="..." style="width: 64rem;height: 31.9285rem">    
 <div class="carousel-caption"></div>   
 </div>   
 <div class="item">    
 <img src="三组项目/PC/PC首页/lunbo2.jpg" alt="..."style="width: 64rem;height: 31.9285rem">    
 <div class="carousel-caption"></div>   
 </div>   
 <div class="item">    
 <img src="三组项目/PC/PC首页/lunbo3.jpg" alt="..."style="width: 64rem;height: 31.9285rem">    
 <div class="carousel-caption"></div>   
 </div>  
 </div>  
 <!-- Controls --> 这里就是那左右两个箭头  
 <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">上翻   
 <span class="glyphicon glyphicon-chevron-left"></span>  
 </a>  
 <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">下翻   
 <span class="glyphicon glyphicon-chevron-right"></span>  
 </a> 
 </div>
 </div>

如果只需两个图 那么就自己改代码 删除一个图片 一个圆点 并改好圆点那里

data-slide-to="0" 里面的数字 这里的0 只是举例数字 具体情况 自行判断

以上所述是小编给大家介绍的通过BootStrap实现轮播图的实际应用,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 #Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 #Javascript
关于js原型的面试题讲解
Sep 25 #Javascript
前端设计师们最常用的JS代码汇总
Sep 25 #Javascript
JavaScript使用Range调色及透明度实例
Sep 25 #Javascript
JavaScript中原型链存在的问题解析
Sep 25 #Javascript
JavaScript制作颜色反转小游戏
Sep 25 #Javascript
You might like
PHP程序员不应该忽略的3点
2015/10/09 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
js同源策略详解
2015/05/21 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
javascript self对象使用详解
2016/10/18 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python super函数使用方法详解
2020/02/14 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
什么是会话Bean
2015/05/14 面试题
管理科学大学生求职信
2013/11/13 职场文书
营业员演讲稿
2013/12/30 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
男女朋友协议书
2014/04/23 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
普通党员对照检查材料
2014/08/28 职场文书
出差报告格式模板
2014/11/06 职场文书
2014年教学工作总结
2014/11/13 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js