通过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 相关文章推荐
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
Javascript自定义事件详解
Jan 13 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 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 更新数据库中断的解决方法
2009/06/05 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
生成二维码方法汇总
2014/12/26 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
vuejs指令详解
2017/02/07 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
Python的动态重新封装的教程
2015/04/11 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python端口扫描简单程序
2016/11/10 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
Python实现的购物车功能示例
2018/02/11 Python
python pyheatmap包绘制热力图
2018/11/09 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
十八大报告观后感
2014/01/28 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
财产保全担保书范文
2014/04/01 职场文书
新农村建设标语
2014/06/24 职场文书
医德医风个人总结
2015/02/28 职场文书
雷锋电影观后感
2015/06/10 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL