在bootstrap中实现轮播图实例代码


Posted in Javascript onJune 11, 2017

Bootstrap中轮播图插件叫作Carousel

以下容器就是整个轮播图组件的整体,

注意该盒子必须加上 class=”carousel slide” data-ride=”carousel” 表示当 前是一个轮播图

bootstrap.js会自动为当前元素添加图片轮播的特效

<div id="轮播图的ID" class="carousel slide" data-ride="carousel"> 
 <!-- ol标签是图片轮播的控制点 -->
 <ol class="carousel-indicators">
  <!-- 
   每一个li就是一个单独的控制点
    data-target属性就是指定当前控制点控制的是哪一个轮播图,其目的是如果界面上有多个轮播图,便于区分到底控制哪一个
    data-slide-to属性是指当前的li元素绑定的是第几个轮播项
   注意,默认必须给其中某个li加上active,展示的时候就是焦点项目
  -->
   <li data-target="#轮播图的ID" data-slide-to="0" class="active"></li>
   <li data-target="#轮播图的ID" data-slide-to="1"></li>
  <!-- ...更多的 -->
</ol>
 <!-- 
  .carousel-inner是所有轮播项的容器盒子,
  注意role="listbox"代表当前div是一个列表盒子,作用就是给当前div添加  一个语义
 -->
 <div class="carousel-inner" role="listbox">
  <!-- 每一个.item就是单个轮播项目,注意默认要给第一个轮播项目加上active,表示为焦点 -->
  <div class="item active">
   <!-- 轮播项目中展示的图片 -->
   <img src="example.jpg" alt="示例图片">
   <div class="carousel-caption">
    <!-- 标题或说明性文字,如果不需要,直接删除当前div.carousel-caption -->
   </div>
  </div>
  <div class="item">
   <!-- ... -->
  </div>
  <!-- ... -->
 </div>
  <!-- 图片轮播上左右两个控制按钮,分别点击可以滚动到上一张和下一张 -->
 <!-- 此处需要注意的是 该a链接的href属性必须指向需要控制的轮播图ID -->
 <!-- 另外a链接中的data-slide="prev"代表点击该链接会滚到上一张,如果设置为next的话则相反 -->
 <a class="left carousel-control" href="#轮播图的ID" rel="external nofollow" rel="external nofollow" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">上一张</span>
 </a>
 <a class="right carousel-control" href="#轮播图的ID" rel="external nofollow" rel="external nofollow" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">下一张</span>
 </a>
</div>

以上所述是小编给大家介绍的在bootstrop中实现轮播图的实例代码,希望对大家有所帮助!

Javascript 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
javascript测试题练习代码
Oct 10 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
angular实现IM聊天图片发送实例
May 08 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 #Javascript
PHP7新特性简述
Jun 11 #Javascript
jquery与js实现全选功能的区别
Jun 11 #jQuery
jQuery 表单序列化实例代码
Jun 11 #jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 #jQuery
基于angular实现模拟微信小程序swiper组件
Jun 11 #Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 #Javascript
You might like
simplehtmldom Doc api帮助文档
2012/03/26 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
函授毕业自我鉴定
2014/02/04 职场文书
党员教师工作决心书
2014/03/13 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
校车安全管理责任书
2015/05/11 职场文书