<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Bootstrap轮播图</title>

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

    <style>

        #slidershow{

            width: 300px;

            height: 220px;

            margin: 50px auto;

        }

        img{

            width: 300px;

            height: 220px;

        }

    </style>

</head>

<body>

<!--#slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感-->

<div id="slidershow" class="carousel slide" data-ride="carousel" data-wrap="true" data-pause="hover" data-interval="2000">

    <!-- 设置图片轮播的顺序carousel-indicators -->

    <ol class="carousel-indicators">

        <li class="active" data-toggle="#slideshow" data-side-to="0"></li>

        <li data-toggle="#slideshow" data-side-to="1"></li>

        <li data-toggle="#slideshow" data-side-to="2"></li>

        <li data-toggle="#slideshow" data-side-to="3"></li>

    </ol>

    <!--设置轮播图片carousel-inner-->

    <div class="carousel-inner">

        <div class="item active">

            <a href="#"><img src="data:images/1.jpeg" alt="熊本熊"></a>

            <!--图片描述carousel-caption-->

            <div>

                <h3 class="carousel-caption">熊本熊</h3>

                <p>超可爱的熊熊</p>

            </div>

        </div>

        <div class="item">

            <a href="#"><img src="data:images/2.jpg" alt="熊本熊"></a>

        </div>

        <div class="item">

            <a href="#"><img src="data:images/3.jpeg" alt="熊本熊"></a>

        </div>

        <div class="item">

            <a href="#"><img src="data:images/4.jpg" alt="熊本熊"></a>

        </div>

    </div>

    <!--设置轮播图控制器carousel-control-->

    <a class="left carousel-control" href="#slidershow" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

    </a>

    <a class="right carousel-control" href="#slidershow" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

    </a>

</div>

<script src="js/jquery-1.11.3.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js" type="text/javascript"></script>

</body>

</html>

以上使用声明式的方法实现轮播

声明式方法是通过定义 data 属性来实现，data 属性可以很容易地控制轮播的位置。其主要包括以下几种：

  • data-ride 属性：取值 carousel，并且将其定义在 carousel 上。
  • data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如前面示例所示，取值为“#slidershow”，并且将其定义在轮播图计数器的每个 li 上。
  • data-slide 属性：取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。
  • data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。

如果没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Bootstrap轮播图</title>

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

    <style>

        #slidershow{

            width: 300px;

            height: 220px;

            margin: 50px auto;

        }

        img{

            width: 300px;

            height: 220px;

        }

    </style>

</head>

<body>

<!--#slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感-->

<!--<div id="slidershow" class="carousel slide" data-ride="carousel" data-wrap="true" data-pause="hover" data-interval="1000">-->

<!--注意，下面这句代码比上有变动-->

<div id="slidershow" class="carousel slide">

    <!-- 设置图片轮播的顺序carousel-indicators -->

    <ol class="carousel-indicators">

        <li class="active" data-toggle="#slideshow" data-side-to="0"></li>

        <li data-toggle="#slideshow" data-side-to="1"></li>

        <li data-toggle="#slideshow" data-side-to="2"></li>

        <li data-toggle="#slideshow" data-side-to="3"></li>

    </ol>

    <!--设置轮播图片carousel-inner-->

    <div class="carousel-inner">

        <div class="item active">

            <a href="#"><img src="data:images/1.jpeg" alt="熊本熊"></a>

            <!--图片描述carousel-caption-->

            <div>

                <h3 class="carousel-caption">熊本熊</h3>

                <p>超可爱的熊熊</p>

            </div>

        </div>

        <div class="item">

            <a href="#"><img src="data:images/2.jpg" alt="熊本熊"></a>

        </div>

        <div class="item">

            <a href="#"><img src="data:images/3.jpeg" alt="熊本熊"></a>

        </div>

        <div class="item">

            <a href="#"><img src="data:images/4.jpg" alt="熊本熊"></a>

        </div>

    </div>

    <!--设置轮播图控制器carousel-control-->

    <a class="left carousel-control" href="#slidershow" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left"></span>

    </a>

    <a class="right carousel-control" href="#slidershow" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right"></span>

    </a>

</div>

<script>

    $(function () {

        $("#slidershow").carousel({

            interval:2000

        });

        $("#slidershow a.left").click(function () {

            $(".carousel").carousel("prev");

        });

        $("#slidershow a.right").click(function () {

            $(".carousel").carousel("next");

        })

    })

</script>

<script src="js/jquery-1.11.3.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js" type="text/javascript"></script>

</body>

</html>

Bootstrap插件-carousel(轮播图)的更多相关文章

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

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

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

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

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

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

  4. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

  5. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  6. iview Carousel 轮播图自适应宽高；iview 轮播图 图片重叠问题；iview tabs 高度互相影响问题；vue this问题；

    最终效果图: 一.轮播图中图片自适应宽高:  <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...

  7. layui常用插件(一) 轮播图

    轮播图 <html lang="en"> <head> <meta charset="UTF-8"> <meta ht ...

  8. 插件-3D轮播图

    先上效果图 查看实例点击 这里  这个栗子中,可以选择展示 5 张 或者展示 3 张,即使是只有一个slide,也可以完成布局,正常轮播,麻麻再也不用怕只有4个slid而不能用这种轮播啦! 本栗实现原 ...

  9. Carousel轮播图

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

随机推荐

  1. 第四篇 express 安装esasticsearch

    1.首先,我们创建一个Express应用程序!我将使用express.js生成器. npm install -g express-generator express ./autocompleter c ...

  2. C++中对象的常引用

    直接传递对象名 用对象名做函数参数时,在函数调用时将建立一个新的对象,它是形参对象的拷贝. ================下面给出一个直接传递对象名的例子程序1.1================= ...

  3. 18.phpmyadmin 4.8.1 远程文件包含漏洞（CVE-2018-12613）

    phpmyadmin 4.8.1 远程文件包含漏洞(CVE-2018-12613) phpMyAdmin是一套开源的.基于Web的MySQL数据库管理工具.其index.php中存在一处文件包含逻辑, ...

  4. C# 中的EventHandler实例详解-转

    //这里定义了一个水箱类 public class 水箱 {   //这是水箱的放水操作   public void 放水() { }   //这是水箱的属性   public double 体积; ...

  5. IIS中使用子目录文件作为默认文档（Default Document）替代重定向

    以前一直以为IIS应用程序的默认文档只能设置根目录下的文件,像index.html,default.aspx等,后来经同事指点,原来子目录或者子应用程序下的文件也可以添加到根应用程序的默认文档列表中. ...

  6. hdu 1848 Fibonacci again and again（SG函数）

    Fibonacci again and again HDU - 1848 任何一个大学生对菲波那契数列(Fibonacci numbers)应该都不会陌生,它是这样定义的: F(1)=1; F(2)= ...

  7. 洛谷P4121 [WC2005]双面棋盘（线段树套并查集）

    传送门 先膜一下大佬->这里 据说这题正解是LCT,然而感觉还是线段树套并查集的更容易理解 我们对于行与行之间用线段树维护,每一行内用并查集暴力枚举 每一行内用并查集暴力枚举连通块这个应该容易理 ...

  8. JavaScript 性能优化

    加载和执行 1. </body>闭合标签之前,将所有的<script> 标签放在页面底部,确保在脚步执行之前页面已经完成渲染. 2. 合并脚本.下载单个 100KB 的文件将比 ...

  9. Java基础--常用API--集合类相关API

    一.泛型 1.泛型的本质是将类型参数化,即将数据类型作为参数. 2.泛型可以在编译期进行检查,其所有的强制转换是隐式且自动的,提高了代码的安全性. 3.泛型可以用在类(泛型类).接口(泛型接口).方法 ...

  10. Python中使用Type hinting 和 annotations

    Type hints最大的好处就是易于代码维护.当新成员加入,想要贡献代码时,能减少很多时间. 也方便我们在调用汉书时提供了错误的类型传递导致运行时错误的检测. 第一个类型注解示例 我们使用一个简单例 ...