通过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获取input的value问题说明
Aug 19 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
拖动时防止选中
Feb 03 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
javascript canvas封装动态时钟
Sep 30 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用header函数实现301跳转代码实例
2013/11/25 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
AJAX的使用方法详解
2017/04/29 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
js类型检查实现代码
2010/10/29 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
python处理cookie详解
2014/02/07 Python
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python3实现Web网页图片下载
2016/01/28 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python异常触发及自定义异常类解析
2019/08/06 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
python 表格打印代码实例解析
2019/10/12 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
个人授权委托书格式
2014/08/30 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server