<!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. Maven 梳理-自动创建Maven项目（非web）

    mvn archetype:create和mvn archetype:generate create is deprecated in maven 3.0.5 and beyond,在maven3.0 ...

  2. 问题：程序编译通过，但是执行时报错：coredump

    问题描述: 在一个客户现场搭建环境时,遇到了一个棘手的问题,C代码编译通过后,无法正常运行,启动会出现“coredump”错误. 运行环境为新搭建的AIX6.1,数据库为Oracle11.2.0.2. ...

  3. 遇见Python

    开发: 开发语言:    1.高级语言:Python  Java.PHP    C#    Go  ruby C++...    ===> 字节码    2.低级语言:C.汇编          ...

  4. redis实践 —— redisReply简析

    redisReply 定义如下: /* This is the reply object returned by redisCommand() */ typedef struct redisReply ...

  5. webpack loader实现

    正值前端组件化开发时代,那么必然离不开目前最火的构建工具--webpack(grunt,gulp等暂且不谈).说到这里,刚好有几个问题: 为什么运行打包命令之后,.vue 文件可以转成 .js 文件 ...

  6. Spring Boot 2.X(七)：Spring Cache 使用

    Spring Cache 简介 在 Spring 3.1 中引入了多 Cache 的支持,在 spring-context 包中定义了org.springframework.cache.Cache 和 ...

  7. Elasticsearch Java API 很全的整理

    Elasticsearch 的API 分为 REST Client API(http请求形式)以及 transportClient API两种.相比来说transportClient API效率更高, ...

  8. SpringBoot应用入门

    一.项目搭建 使用IDEA,点击create new project,然后左边的spring initializr,右边SDK1.8,URL:https://start.spring.io,next ...

  9. 快速入门Maven（三）

    一.整合ssh框架的Maven项目 1.传递依赖 只添加了一个struts2-core依赖,发现项目中出现了很多jar, 这种情况叫 依赖传递 2.依赖版本冲突的解决 (1)第一声明优先原则(就是谁写 ...

  10. 用阿里官网提供的plupload oss的web直传，视频上传进行前端验证它的时长，尺寸，大小等。替换上一个不需要的单个视频

    accessid = '' accesskey = '' host = '' policyBase64 = '' signature = '' callbackbody = '' filename = ...