<div class="container">
        <div data-ride="carousel" id="carousel_container" class="carousel slide">
          <!-- 图片容器 -->
          <div class="carousel-inner">
            <div class="item"><img src="data:images/1.jpg" style="width:500px height:100px"></div>
            <div class="item active"><img src="data:images/2.jpg"></div>
            <div class="item"><img src="data:images/3.jpg"></div>  
          </div>
          <!-- 小圆圈 -->
          <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel_container"></li>
            <li data-slide-to="1" data-target="#carousel_container"></li>
            <li data-slide-to="2" data-target="#carousel_container"></li>
          </ol>
          <!-- 左右按钮 -->
          <a href="#carousel_container" data-slide="prev" class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>

<a href="#carousel_container" data-slide="next" class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
          
        </div>
        
      </div>

BootStrap实现图片轮播的更多相关文章

  1. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

  2. 基于bootstrap的图片轮播效果展示

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  3. 基于bootstrap的图片轮播功能

    插入js及css支持: <link rel="stylesheet" href="css/bootstrap.min.css"/> <scri ...

  4. 图片轮播(bootstrap)与 圆角搜索框(纯css)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. bootstrap 图片轮播效果

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http: ...

  6. 全面解析Bootstrap图片轮播效果

    http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...

  7. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

  8. bootstrap:图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  9. jquery 图片轮播demo实现

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...

随机推荐

  1. 关于微信小程序的场景值

    微信小程序 “场景值”     对运营同学和产品比较有用一般开发者需在这里埋点,获取场景址,看一下小程序,用户一般从哪个路口进的有利于提升产品体验

  2. shell (check return of each line)(PIPESTATUS[@])and sudoer

    shell result from cmdline echo $? if 0 then success ;else failure (shell 执行每部返回值,rm -rf 错误,打包不能覆盖) 我 ...

  3. [已解决]ubuntu下chrome和firefox输入框内无法快捷键全选

    问题现象: 在chrome或firefox浏览器(其他地方没试)的输入框中使用ctr + a进行全选失效,在google中找到了这个已经解决的http://askubuntu.com/question ...

  4. Android项目使用Eclipse进行单元测试

    Android项目如果每次都整个调试的话,要加载UI,会等很长时间.所以单元测试就显得很方便了. 要进行单元测试,首先得修改下AndroidManifest.xml文件.在Instrument标签里点 ...

  5. MySQL5.7安装手册

    MySQL安装文档 1. 安装依赖包 yum install -y autoconf automake imake libxml2-devel expat-devel cmake gcc gcc-c+ ...

  6. ui-select : There is no "X"(delete button) with selectize theme, when allow-clear="true"

    but add allow-clear="true"For Bootstrap and Select2 themes, it's working perfectly. reason ...

  7. TensorFlow学习笔记(七)TesnorFlow实现计算加速

    目录: 一.TensorFlow使用GPU 二.深度学习训练与并行模式 三.多GPU并行 四.分布式TensorFlow 4.1分布式TensorFlow的原理 4.2分布式TensorFlow模型训 ...

  8. CCoolBar 的替代方案 CDockablePane。

    (阅读受众需有一定MFC知识储备.) (技术支持:http://www.cnblogs.com/shuhaoc/archive/2011/06/26/cdockableform.html) 在以往很多 ...

  9. STL: fill,fill_n,generate,generate_n

    fill Assigns the same new value to every element in a specified range. template<class ForwardIter ...

  10. 8种主要排序算法的C#实现 (二)

    归并排序 归并排序也是采用“分而治之”的方式.刚发现分治法是一种算法范式,我还一直以为是一种需要意会的思想呢. 不好意思了,孤陋寡闻了,哈哈! 原理:将两个有序的数列,通过比较,合并为一个有序数列.  ...