基本介绍

1、bootstrap有轮播图的模板，我们只需要改动下就行。

2、这里我们将介绍桌面版本和移动版本最后是综合版本

桌面版本

1、这里的图片设置是有窍门的，不再去添加img标签，而是作为a标签的背景图片

2、背景图片的设置必须是两边很长，中间是内容，设置cover，居中

<!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">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <style>

        .item a {

            display: block;

            height: 410px;

            background-size: cover;

            background-position: center;

            background-repeat: no-repeat;

        }

        .item a.a1 {

            background-image: url("images/slide_01_2000x410.jpg");

        }

        .item a.a2 {

            background-image: url("images/slide_03_2000x410.jpg");

        }

        .item a.a3 {

            background-image: url("images/slide_04_2000x410.jpg");

        }

    </style>

    <!-- 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="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->

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

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

        <div class="item active">

            <a class="a1 hidden-xs"></a>

        </div>

        <div class="item">

            <a class="a2 hidden-xs"></a>

        </div>

        <div class="item">

            <a class="a3 hidden-xs"></a>

        </div>

    </div>

    <!-- Controls -->

    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

    </a>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>

</body>

</html>

移动版本

1、移动版本需要注意img标签和a标签的宽度都是100%

<!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">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <style>

        .item a {

            display: block;

            width: 100%;

        }

        .item a img {

            width: 100%;

        }

    </style>

    <!-- 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="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->

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

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

        <div class="item active">

            <a class="hidden-lg hidden-md hidden-sm">

                <img src="data:images/test01.jpg" alt="...">

            </a>

        </div>

        <div class="item">

            <a class="hidden-lg hidden-md hidden-sm">

                <img src="data:images/test02.jpg" alt="...">

            </a>

        </div>

        <div class="item">

            <a class="hidden-lg hidden-md hidden-sm">

                <img src="data:images/test03.jpg" alt="...">

            </a>

        </div>

    </div>

    <!-- Controls -->

    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

    </a>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>

</body>

</html>

综合版本

1、将两者融合在一起，在不同设备下，有不同的显示效果

2、注意使用响应式工具就行了

<!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">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <style>

        .item a:nth-child(1) {

            display: block;

            height: 410px;

            background-size: cover;

            background-position: center;

            background-repeat: no-repeat;

        }

        .item a:nth-child(1).a1 {

            background-image: url("images/slide_01_2000x410.jpg");

        }

        .item a:nth-child(1).a2 {

            background-image: url("images/slide_03_2000x410.jpg");

        }

        .item a:nth-child(1).a3 {

            background-image: url("images/slide_04_2000x410.jpg");

        }

        .item a:nth-child(2) {

            display: block;

            width: 100%;

        }

        .item a img {

            width: 100%;

        }

    </style>

    <!-- 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="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->

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

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

        <div class="item active">

            <a class="a1 hidden-xs"></a>

            <a class="hidden-lg hidden-md hidden-sm">

                <img src="data:images/test01.jpg" alt="...">

            </a>

        </div>

        <div class="item">

            <a class="a2 hidden-xs"></a>

            <a class="hidden-lg hidden-md hidden-sm">

                <img src="data:images/test02.jpg" alt="...">

            </a>

        </div>

        <div class="item">

            <a class="a3 hidden-xs"></a>

            <a class="hidden-lg hidden-md hidden-sm">

                <img src="data:images/test03.jpg" alt="...">

            </a>

        </div>

    </div>

    <!-- Controls -->

    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></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" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

    </a>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>

</body>

</html>

移动web——bootstrap响应式轮播图的更多相关文章

  1. 第二百五十一节，Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

  2. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

  3. 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  4. JavaScript响应式轮播图插件–Flickity

    简介 flickity是一款自适应手机触屏滑动插件,它的API参数很丰富,包括对齐方式.循环滚动.自动播放.是否支持拖动.是否开启分页.是否自适应窗口等. 在线演示及下载 演示地址 下载页面 使用方法 ...

  5. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

  6. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

  7. 分享大麦UWP版本开发历程-01.响应式轮播顶部焦点图

    话说有一天,临近下班无心工作,在网上看各种文章,阅读到了一篇名为<聊聊大麦网UWP版的首页顶部图片联动效果的实现方法>(传递:http://www.cnblogs.com/hippieZh ...

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

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

  9. web常见效果之轮播图

    轮播图的展示效果是显而易见: HTML代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

随机推荐

  1. MEAN,从MONGO DB里弄出点东东来啦，以REST风格显示JSON

    最近一直在弄弄的... javascript的风格弄熟了,我觉得肯定很快,,但心中有种感觉,DJANGO和MEAN这种结构,搞大的不行. 因为MVC这种结构感觉不如SPRING这些严谨,是不是我有偏见 ...

  2. 淘宝手机rem的如何使用

    1.主要介绍几个移动端常用的单位rem.vw.vh,配合传统的px.百分比.<viewport>标签,兼容适配移动端的各种分辨率的手机端. rm : 这个单位是以父元素为标准来进行计算 , ...

  3. angularjs 过滤多组数据

    <html> <head> <script src="angular.min.js"></script> <script ty ...

  4. 交换机tagged与untagged的关系深入探讨

    端口接收数据时: 如果端口是tagged方式,当数据包本身不包含VLAN的话,输入的数据包就加上该缺省vlan:如果数据包本身已经包含了VLAN,那么就不再添加. 如果是untagged方式,输入的数 ...

  5. [Vue @Component] Extend Vue Components in TypeScript

    This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. ...

  6. UIView的层介绍

    UIView的层介绍 subview在西安市到屏幕上时,是位于superview上层的. 同一个view的subview时依照增加的顺序显示相应层的.越晚增加的subview显示在越上层,反之也是如此 ...

  7. ARP病毒查找与防范

    笔者是一名大学生,学的是网络project. 自然接触的网络就多了.当然免不了做些坏事,嘿嘿. 比如我经经常使用在网上学习的知识去測验一下我自己的电脑或者同学啥的,都是一些小打小闹. 无伤大雅,知道有 ...

  8. php訪问控制

    訪问控制通过keywordpublic,protected和private来实现. 被定义为公有的类成员能够在不论什么地方被訪问.被定义为受保护的类成员则能够被其自身以及其子类和父类訪问.被定义为私有 ...

  9. 并行运维工具pssh的安装及实战应用

    并行运维工具pssh的安装及实战应用 - CSDN博客 https://blog.csdn.net/field_yang/article/details/68066468

  10. Android开发常用框架汇总

    作为一名程序猿,好的工具会让你在搬运工的道路上越走越远.以下框架是AC在开发过程中经常会使用到的一些好的框架.列在这里做一个小小的总结,包含但不限于此. 响应式编程 RxJava https://gi ...