bootstrap 图片组滚动

2018-11-18 20:10:58 qq_41684261 阅读数 724
  • html入门

    掌握python全栈开发的必备技能,具备中大型运维自动化系统的开发能力

    209人学习 李哲
    免费试看

引入头文件:<link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="jquery-3.3.1.js"></script>

 开始写父级Div:

<div id="carouselExampleIndicators" class="carousel slide"
                 data-ride="carousel" style="height: 400px">
<div>

可通过data-intervel="2000" 来实现图片自动播放间隔为2s

图片下面的“点”:

<ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2" class=""></li>
</ol>

 

 图片:

<div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-500" src="a.jpg">
                    </div>
                    <div class="carousel-item" style="width: 300px;">
                        <img class="d-block w-500" src="b.jpg">
                    </div>
                    <div class="carousel-item" style="width: 300px;">
                        <img class="d-block w-500" width="500px" height="380px" src="c.jpg">
                    </div>
</div>

 

 左右播放组件:

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
</a>
a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
</a>

注意href要链接父级元素id

2015-04-09 09:56:40 springmvc_springdata 阅读数 1223
  • html入门

    掌握python全栈开发的必备技能,具备中大型运维自动化系统的开发能力

    209人学习 李哲
    免费试看

原文:js多组图片无缝滚动

源代码下载地址:http://www.zuidaima.com/share/1550463717608448.htm

js多组图片无缝滚动

js多组图片无缝滚动


2016-12-17 16:22:04 cmdos 阅读数 648
  • html入门

    掌握python全栈开发的必备技能,具备中大型运维自动化系统的开发能力

    209人学习 李哲
    免费试看


bootstrap初级知识旋转轮播

源文件:carousel.js、carousel.less

CSS文件:bootstrap.css

这些源文件可以从bootstrap中下载,关于轮播,有很多译法,有人叫轮播,有人叫传送带。轮播效果默认是向左轮播,大家先看一下效果图哦!

下面是源代码:

<div class="row">
<div id="mid" class="col-xs-6">
<div data-ride="carousel" class="carousel slide" id="carousel-container">
<div class="carousel-inner">

/*--这里放置轮播的图片 --*/
<div class="item"><img alt="第一张图" src="#"></img></div>
<div class="item active"><img alt="第二张图" src="#"></img></div>
<div class="item"><img alt="第三张图" src="#"></img></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" class="active"></li>
</ol>
<a data-slide="prev" href="#carousel-container" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" href="#carousel-container" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>

<h1>www.dawen.org</h1>
      </a>
</div>
</div>


旋转轮播组件的自定义属性
属性名称 类型 默认值 描述
data-interval number 5000 幻灯片轮播的等待时间(毫秒)。如果为false,轮播将不会自动开始循环
data-pause string hover 默认鼠标停留在幻灯片区域即暂停轮播。鼠标离开即启动轮播
data-wrap boolean true 轮播是否持续循环
2016-10-22 00:37:49 u013076360 阅读数 12174
  • html入门

    掌握python全栈开发的必备技能,具备中大型运维自动化系统的开发能力

    209人学习 李哲
    免费试看

图片无缝滚动,不需要繁琐的javascript代码,只需引用BootStrap 中的javascript插件(Carousel)即可轻松实现。来看看吧:
现附上演示地址:

https://haochn.github.io/demo/BootStrap/PicSwitch.html

源代码:

<!DOCTYPE html>
<html lang="zh-cn">
  <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>BootStrap 实现图片无缝滚动</title>
<style>
.body {
    display: block;  
    margin-left: auto;  
    margin-right: auto; 
    float: none; 
    width:800px;
}
</style>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
  </head>
  <body>


<div class="body">
 <h1 class="text-center">BootStrap 实现图片无缝滚动</h1>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 轮播(Carousel)指标 -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- 轮播(Carousel)项目内容 -->
  <div class="carousel-inner" role="listbox">
    <!-- 默认显示图片 -->
    <div class="item active">
      <img src="img/1.jpg" alt="态生两靥之愁,娇袭一身之病。">
     <!-- 图片描述内容 -->
      <div class="carousel-caption">
        态生两靥之愁,娇袭一身之病。
      </div>
    </div>
    <div class="item">
      <img src="img/2.jpg" alt="泪光点点,娇喘微微。">
      <div class="carousel-caption">
        泪光点点,娇喘微微。
      </div>
    </div>
     <div class="item">
      <img src="img/3.jpg" alt="闲静似娇花照水,行动如弱柳扶风。">
      <div class="carousel-caption">
        闲静似娇花照水,行动如弱柳扶风。
      </div>
    </div>
     <div class="item">
      <img src="img/4.jpg" alt="心较比干多一窍,病如西子胜三分。">
      <div class="carousel-caption">
        心较比干多一窍,病如西子胜三分。
      </div>
    </div>

  </div>

   <!-- 轮播(Carousel)导航(控制左右移动) -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>

    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</div>

  </body>
</html>

是不是很简单没呢???,自己动手试试吧!!!

2018-08-21 19:57:42 sunraito 阅读数 466
  • html入门

    掌握python全栈开发的必备技能,具备中大型运维自动化系统的开发能力

    209人学习 李哲
    免费试看

十二、列表组面板和嵌入组件

学习内容

  • 列表组组件
  • 带徽章的列表页组件、禁用选项、带情景的选项
  • 向列表组添加自定义内容
  • 面板组件
  • 面板标题
  • 带脚注的面板
  • 情景面板
  • 带表格和列表组的面板
  • 响应式嵌入组件

● 列表组组件

1..list-group .list-group-item
2.<ul><li>的组合存在局限性,在有链接的情况下,只有a标签区域可以点击跳转,建议使用<div><a>组合形式

<ul class="list-group">
   <li class="list-group-item"><a href="#">1.我爱北京天安门</a></li>
    <li class="list-group-item"><a href="#">2.天安门上太阳升</a></li>
    <li class="list-group-item"><a href="#">3.伟大领袖毛主席</a></li>
    <li class="list-group-item"><a href="#">4.指引我们向前进</a></li>
</ul>

<div class="list-group">
    <a href="#" class="list-group-item">我爱1.北京天安门</a>
    <a href="#" class="list-group-item">天安2.门上太阳升</a>
    <a href="#" class="list-group-item">伟大3.领袖毛主席</a>
    <a href="#" class="list-group-item">指引4.我们向前进</a>
</div>

这里写图片描述

带徽章的列表页组件、禁用选项、带情景的选项、首选选项

<div class="list-group">
    <a href="#" class="list-group-item active">1.我爱北京天安门</a>
    <a href="#" class="list-group-item">2.天安门上太阳升
    <span class="badge">NEW</span>
    </a>
    <a href="#" class="list-group-item disabled">3.伟大领袖毛主席</a>
    <a href="#" class="list-group-item list-group-item-success">4.指引我们向前进</a>
</div>

这里写图片描述

向列表组添加自定义内容

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4>我是一个标题</h4>
        <p>我是详细信息</p>
    </a>
    <a href="#" class="list-group-item">2.天安门上太阳升
    <span class="badge">NEW</span>
    </a>
    <a href="#" class="list-group-item">
        <h4>能不能添加图片呢?</h4>
        <img src="image/small.jpg" alt="">
    </a>
    <a href="#" class="list-group-item list-group-item-success">4.指引我们向前进</a>
</div>

这里写图片描述

● 面板组件

面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板,只需要向<div>元素添加 class .panel 和 class .panel-default 即可

<div class="panel panel-default">
    <div class="panel-body">
        基本面板组件
    </div>
</div>

这里写图片描述

面板标题

使用 .panel-heading class 可以很简单地向面板添加标题容器
使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题

<div class="panel panel-default">
<div class="panel-heading">
         没有panel-title的标题
    </div>
    <div class="panel-body">
        带标题的面板
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            带panel-title的标题
        </div>
    </div>
    <div class="panel-body">
        带标题的面板
    </div>
</div>

这里写图片描述

带脚注的面板

.panel-footer

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            我是面板标题
        </div>
    </div>
    <div class="panel-body">
        我是面板内容
    </div>
    <div class="panel-footer">
        我是面板脚注
    </div>
</div>

这里写图片描述

带情景的面板

用情景类替换.panel-default
.panel-primary
.panel-success
.panel-warning
.panel-danger

<div class="panel panel-primary">
    <div class="panel-heading">
        <div class="panel-title">
            我是面板标题
        </div>
    </div>
    <div class="panel-body">
        我是面板内容
    </div>
    <div class="panel-footer">
        我是面板脚注
    </div>
</div>

这里写图片描述

带表格和带列表组的面板

<div class="panel panel-info">
   <div class="panel-heading">
        <div class="panel-title">
            我是面板标题
        </div>
    </div>
    <div class="panel-body">
        我是一个面板容器
    </div>
    <!--表格-->
    <table class="table">
        <tr>
            <th>name</th>
            <th>sex</th>
            <th>aget</th>
        </tr>
        <tr>
            <td>luffy</td>
            <td>male</td>
            <td>18</td>
        </tr>
        <tr>
            <td>nami</td>
            <td>female</td>
            <td>17</td>
        </tr>
    </table>
    <!--列表组-->
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <h4>这是列表组的标题</h4>
            <p>这是列表组的内容</p>
        </a>
        <a href="#" class="list-group-item">
            <img src="image/small.jpg" alt="">
        </a>
        <a href="#" class="list-group-item list-group-item-success">第一选项</a>
        <a href="#" class="list-group-item">第二选项</a>
    </div>
    <div class="panel-footer">
        我是面板脚注
    </div>
</div>

这里写图片描述

● 响应式嵌入组件

.iframe .embed .object .video这些元素很难被响应式
这里写图片描述

embed为例,只找到16:9,4:3两种相应样式,如16:10暂未找到方法
.embed-responsive
.embed-responsive-16by9
.embed-responsive-4by3

<div class="embed-responsive embed-responsive-16by9">
   <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=n140644z0ww&auto=0" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</div>

这里写图片描述

拓展:
<iframe> <video> <object>自行测试

Bootstrap

阅读数 3501