Bootstrap轮播图学习使用


Posted in Javascript onFebruary 10, 2017

本文实例为大家分享了Bootstrap轮播图的具体代码,供大家参考,具体内容如下

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
    <style>
      #pic{
        width:900px;
        margin:0 auto;
      }
      .carousel-caption{
        color:#f00;
      }
    </style>
  </head>
  <body>
    <!--carousel中文译为轮播,旋转木马 slide给图片添加运动效果; 
      data-interval是间隔时间,不能低于400否则易出问题,单位为ms即毫秒; 
      data-ride="carousel为页面一加载就开始轮播图片
      carousel-caption是在图片上放置文字-->
    <div class="container">
      <div id="pic" class="carousel slide" data-interval="2000" data-ride="carousel">
        <!--小圆点-->
        <ol class="carousel-indicators">
          <li class="active"></li>
          <li></li>
          <li></li>
          <li></li>
        </ol>
        <!--轮播的图片-->
        <div class="carousel-inner">
          <div class="item active">
            <img src="images/1.jpg"/>  
            <div class="carousel-caption">
              <h4>标题1</h4>
              <p>xxxxxxxxxxxxxxxxxxxx</p>
            </div>
          </div>
          <div class="item">
            <img src="images/2.jpg"/>
            <div class="carousel-caption">
              <h4>标题2</h4>
              <p>xxxxxxxxxxxxxxxxxxxx</p>
            </div>   
          </div>
          <div class="item">
            <img src="images/3.jpg"/>
            <div class="carousel-caption">
              <h4>标题3</h4>
              <p>xxxxxxxxxxxxxxxxxxxx</p>
            </div>   
          </div>
          <div class="item">
            <img src="images/4.jpg"/>
            <div class="carousel-caption">
              <h4>标题4</h4>
              <p>xxxxxxxxxxxxxxxxxxxx</p>
            </div>   
          </div>
        </div>
        <!--左右按钮-->
          <a href="#pic" rel="external nofollow" rel="external nofollow" class="carousel-control left" data-slide="prev">‹</a>
          <a href="#pic" rel="external nofollow" rel="external nofollow" class="carousel-control right" data-slide="next">›</a>
      </div>
    </div>
    <script src="js/jquery-2.1.0.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

Bootstrap轮播图的效果:

Bootstrap轮播图学习使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
js 窗口抖动示例
Sep 04 Javascript
JavaScript中Function详解
Feb 27 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
微信小程序模板之分页滑动栏
Feb 10 #Javascript
三种方式实现瀑布流布局
Feb 10 #Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 #Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 #Javascript
javascript常用的设计模式
Feb 09 #Javascript
简单实现js选项卡切换效果
Feb 09 #Javascript
原生JS轮播图插件
Feb 09 #Javascript
You might like
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
php生成略缩图代码
2012/07/16 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
php图片缩放实现方法
2014/02/20 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
vue中监听返回键问题
2019/08/28 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python斐波那契数列的计算方法
2018/09/27 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
总经理秘书工作职责
2013/12/26 职场文书
仓库管理计划书
2014/05/04 职场文书
公司任命书范本
2014/06/04 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
六一儿童节标语
2014/10/08 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
mysql知识点整理
2021/04/05 MySQL