通过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 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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中循环语句的用法介绍
2012/01/30 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
javascript面向对象编程代码
2011/12/19 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Ubuntu下安装PyV8
2016/03/13 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
pandas带有重复索引操作方法
2018/06/08 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
Python数学形态学实例分析
2019/09/06 Python
解决pip install psycopg2出错问题
2020/07/09 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
营业员演讲稿
2013/12/30 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
单位接收函格式
2015/01/30 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle