插入js及css支持:

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

HTML代码:

 <div id="pictures" class="item">
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="data:images/gf.jpg" class="img-responsive" alt="First slide">
</div>
<div class="item">
<img src="data:images/psb.jpg" class="img-responsive" alt="Second slide">
</div>
<div class="item">
<img src="data:images/uyt.jpg" class="img-responsive" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">&rsaquo;</a>
</div> </div>

基于bootstrap的图片轮播功能的更多相关文章

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

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

  2. 利用bootstrap写图片轮播

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

  3. 个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)

    先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...

  4. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

  5. 原生Js_使用setInterval() 方法实现图片轮播功能

    用javascript图片轮播功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  6. 基于面向对象的图片轮播(js原生代码)

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

  7. 基于jquery的图片轮播 (IE8以上)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. (新手向)基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  9. BootStrap实现图片轮播

    <div class="container">        <div data-ride="carousel" id="carou ...

随机推荐

  1. “全栈2019”Java第四十一章:static关键字

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  2. Eclipse MarketPlace 打不开,对话框闪退

    原文地址: https://blog.csdn.net/wonder_boy869/article/details/81031222 Eclipse的版本更新到了4.8.0(photon版),点击he ...

  3. 大数据-spark HA集群搭建

    一.安装scala 我们安装的是scala-2.11.8  5台机器全部安装 下载需要的安装包,放到特定的目录下/opt/workspace/并进行解压 1.解压缩 [root@master1 ~]# ...

  4. python之类与对象(1)

    面向对象编程是最有效的软件编写方法之一.编写类时,定义一群对象都有的通用行为.基于类创建对象时,每个对象都自动具备这种通用行为,然后可以根据需要赋予每个对象的独特的个性. 1. 类与对象的语法规范 关 ...

  5. MySQL使用UNIQUE实现数据不重复插入

    unique列在一个UNIQUE键上插入包含重复值的记录时,我们可以控制MySQL如何处理这种情况:使用IGNORE关键字或者ON DUPLICATE KEY UPDATE子句跳过INSERT.中断操 ...

  6. HDU 5442 后缀自动机(从环字符串选定一个位置 , 时针或顺时针走一遍,希望得到字典序最大)

    http://acm.hdu.edu.cn/showproblem.php?pid=5442 题目大意: 给定一个字符串,可理解成环,然后选定一位置,逆时针或顺时针走一遍,希望得到字典序最大,如果同样 ...

  7. Dev中gridControl修改列为按钮

    (1)点击Run Designer (2)点击要修改的列,把列的ColumnEdit属性设置为RepositoryItemButtonEdit (3)把TextEditStyle属性设置为HideTe ...

  8. POST请求出现中文乱码的问题

    最近使用Java的HttpURLConnection请求rest接口时候,POST请求参数中的中文传输之后出现乱码的问题,在网上找了一个亲测有效的方法: 将 DataOutputStream out ...

  9. Python取时间,日期的总结

    import datetime from datetime import timedelta now = datetime.datetime.now() #今天 today = now #昨天 yes ...

  10. 我的Python升级打怪之路【六】:面向对象(一)

    面向对象的概述 面向过程:根据业务逻辑从上到下写代码 函数式:将其功能代码封装到函数中,日后便无需编写,仅仅调用即可 [执行函数] 面向对象:对函数进行分类和封装.[创建对象]==>[通过对象执 ...