<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

        <!--要在bootstrap之前引入jquery,bootstrap依赖JQUERY,因为bootstrapJS里要使用$这个jquery变量-->

        <script src="js/popper.js" type="text/javascript" charset="utf-8"></script>

        <!--如果你要用bootstrap使用一些提示性的交互，那么就需要引入提示性的框架popper.js,因为bootstrap的提示就是依赖popper-->

        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

    </head>

        <style type="text/css">

            .first {

                width:1600px;

                height: 500px;

            }

            .second {

                width:1600px;

                height: 500px;

            }

            .third {

                width:1600px;

                height: 500px;

            }

            .row{

                margin-top: 50px;

                text-align: center;

                margin-left: -150px;

            }

            .rowdatu .tuyi img{

                width: 500px;

                height: 500px;

            }

        </style>

    <body>

         <header>

      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

        <a class="navbar-brand" href="#">Carousel</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

          <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">

          <ul class="navbar-nav mr-auto">

            <li class="nav-item active">

              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#">Link</a>

            </li>

            <li class="nav-item">

              <a class="nav-link disabled" href="#">Disabled</a>

            </li>

          </ul>

         <form class="form-inline mt-2 mt-md-0">

            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">

            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

           </form>

         </div>

       </nav>

     </header>

    <main role="main">

         <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="height: auto;"/>

    <ol class="carousel-indicators">

     <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>

     <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>

     <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

    </ol>

    <div class="carousel-inner">

          <div class="carousel-item active">

            <img class="first"  src="img/timg.jpg" alt="First slide">

            <div class="container">

              <div class="carousel-caption text-left">

                <h1>Example headline.</h1>

                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>

              </div>

            </div>

          </div>

          <div class="carousel-item">

            <img class=" second" src="img/timg.jpg" alt="Second slide">

            <div class="container">

              <div class="carousel-caption">

                <h1>Another example headline.</h1>

                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>

              </div>

            </div>

          </div>

          <div class="carousel-item">

            <img class="third" src="img/timg.jpg" alt="Third slide">

            <div class="container">

              <div class="carousel-caption text-right">

                <h1>One more for good measure.</h1>

                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>

              </div>

            </div>

          </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>

      </div>

        <div class="row">

          <div class="offset-2 col-lg-3">

            <img class="rounded-circle" src="img/timg.jpg" alt="Generic placeholder image" width="140" height="140">

            <h2>Heading</h2>

            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>

            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>

          </div>

          <div class="col-lg-3">

            <img class="rounded-circle" src="img/timg.jpg" alt="Generic placeholder image" width="140" height="140">

            <h2>Heading</h2>

            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>

            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>

          </div>

          <div class="col-lg-3">

            <img class="rounded-circle" src="img/timg.jpg" alt="Generic placeholder image" width="140" height="140">

            <h2>Heading</h2>

            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>

          </div>

        </div>

   <hr class="rowdatu">

        <div class="row tuyi">

          <div class="col-md-7">

            <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>

            <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>

          </div>

         <div class="col-1">

           <img src="img/timg.jpg"/>

           </div>

          </div>

        </div>

        <hr class="featurette-divider">

        <div class="row tuer">

          <div class="col-md-7 order-md-2">

            <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>

            <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>

          </div>

           </div>

        </div>

        <hr class="featurette-divider">

        <div class="row tusan">

          <div class="col-md-7">

            <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>

            <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>

          </div>

           <div class="col-md-4">

           <img src="img/timg.jpg"/>

           </div>

        </div>

    </body>

</html>

carousel.html的更多相关文章

  1. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  2. Carousel 旋转画廊特效的疑难杂症

    疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...

  3. 学会用bootstrap的modal和carousel

    bootstrap框架提供了很多好用的javascript组件,可以很方便的实现常用的js效果,比如点击弹出一个div(modal).下拉菜单.旋转木马(carousel或slider),非常适合前端 ...

  4. Bootstrap 之 Carousel

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  5. DevExpress Carousel 设置水平滑动列表

    DevExpress中Carousel控件的应用 Carousel,直译为旋转木马,即旋转视图,可以做为数据的展示或者菜单项. 要实现触摸左右滑动的效果,其实是比较容易的,直接在CarouselPan ...

  6. jquery 的3D Carousel插件参数说明

    这个插件大家都很熟悉了,但是在网上找了很久找不到相关的资料,只有自己琢磨研究了一下.有些参数一眼都可以看出意思,在此我只说一下每个图片要想带一些扩展信息怎么处理. 1:首先需要创建一个ul对象,然后里 ...

  7. Bootstrap之Carousel不能自动播放的解决办法(转)

    Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...

  8. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  9. bootstrap源码分析之Carousel

    源码文件: Carousel.scssCarousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽.高自适应 源码分析: 1.Html结构:主要分为以四个部分  1. ...

  10. Owl Carousel – 支持触摸的 jQuery 响应式传送带插件

    Owl Carousel 是一个 jQuery 插件,使我们能够迅速地创建响应式传送带滑块.这个插件是触摸友好的,能与几乎任何的 HTML 内容兼容使用.另外,强大的选项设置支持分页/滑动速度,启用/ ...

随机推荐

  1. python压测工具Locust

    python压测工具Locust Locust介绍 Locust作为基于Python语言的性能测试框架. 其优点在于他的并发量可以实现单机10倍于LoadRunner和Jmeter工具.他的工作原理为 ...

  2. 读《深入理解Elasticsearch》点滴-聚合-top_hits

    以下是官网手册(部分)(v5.1) 直接直接看官网手册 https://www.elastic.co/guide/en/elasticsearch/reference/5.1/search-aggre ...

  3. python beautiful soup

    官方文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ 使用前需要先安装模块,并安装解析器 pip install beautif ...

  4. Win10下80端口被System占用导致Apache无法启动

    Windows10下80端口被PID为4的System占用导致Apache无法启动的分析与解决方案 方法/步骤     最近更新了Windows10,总体上来说效果还是蛮不错的,然而今天在开启Apac ...

  5. 设计时数据源： 在ActiveReports中直接连接PostgreSql 数据库

    在之前的博客中,我们学习了如何在运行时绑定PostgreSql 数据库,今天我们学习,如何直连PostgreSQL 数据库. 1. 安装PostgreSQL 的ODBC驱动程序 https://www ...

  6. 品Spring：对@Autowired和@Value注解的处理方法

    在Spring中能够完成依赖注入的注解有JavaSE提供的@Resource注解,就是上一篇文章介绍的. 还有JavaEE提供的@javax.inject.Inject注解,这个用的很少,因为一般都不 ...

  7. 03-Django基础概念和MVT架构

    一.Django基础 掌握Django的 MVT 架构的使用 掌握Git管理源代码 主要内容 了解Django的 MVT 架构的使用流程 使用Django完成案例 : 书籍信息管理 MVC介绍 MVC ...

  8. opencv之膨胀与腐蚀

    腐蚀和膨胀 Erosion/Dilation erosion/dilation,用白话说,就是让图像亮的区域收缩和扩张. 原理 我们定义一个卷积核矩阵.这个矩阵可以是任何形状的,但通常而言,是矩形或者 ...

  9. python编程基础之二十一

    元组: t1 = () t2 = tuple() 成员访问: t1 =(10,7,12,23) print(t1[0])  #下表访问 连接操作 t1 = (1,2,3) t2 =(4,5,6) t3 ...

  10. Spring Boot 2.X(八)：Spring AOP 实现简单的日志切面

    AOP 1.什么是 AOP ? AOP 的全称为 Aspect Oriented Programming,译为面向切面编程,是通过预编译方式和运行期动态代理实现核心业务逻辑之外的横切行为的统一维护的一 ...