<!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. ajax的回调函数和匿名函数

    1.什么是js回调函数 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为函数实际上 ...

  2. 4.Windows应急响应：勒索病毒

    0x00 前言 勒索病毒,是一种新型电脑病毒,主要以邮件.程序木马.网页挂马的形式进行传播.该病毒性质恶劣. 危害极大,一旦感染将给用户带来无法估量的损失.这种病毒利用各种加密算法对文件进行加密,被感 ...

  3. idea调试SpringMvc, 出现：”Can't find catalina.jar"错误的解决方法

    用gradle构建的项目,点击运行出现以下错误提示: Error running PraticeWeb: Can't find catalina.jar 21:54 Error running Pra ...

  4. HTMLParser使用详解（2）- Node内容

    HTMLParser使用详解(2)- Node内容  2010-03-18 13:41 HTMLParser将解析过的信息留存为一个树的结构.Node是信息留存的数据类型基础.请看Node的界说:pu ...

  5. CSS概念 - 可视化格式模型（一） 盒模型与外边距叠加

    可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型 可视化格式模型要掌握的3个最重要的CSS概念是 浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形 ...

  6. 【原创】谈谈redis的热key问题如何解决

    引言 讲了几天的数据库系列的文章,大家一定看烦了,其实还没讲完...(以下省略一万字). 今天我们换换口味,来写redis方面的内容,谈谈热key问题如何解决. 其实热key问题说来也很简单,就是瞬间 ...

  7. Linux中关机和磁盘管理命令

    常用的关机命令 shutdown -h 关机 -r 重启 halt poweroff reboot 重启 logout 退出登录命令 磁盘管理命令 df -h 以1024进制计算最合适的单位显示磁盘容 ...

  8. 22. Generate Parentheses (recursion algorithm)

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...

  9. kubectl 命令

    Kubectl 命令表 kubectl run kubectl expose kubectl annotate kubectl autoscale kubectl convert kubectl cr ...

  10. MySQL服务器与MySQL57服务器区别与不同处在哪里，他们各自的领域范围，能不能同时启动服务？

    安装了MySQL-5.7.18.0版本数据库,版本中包含了MySQL Workbench可视化试图工具,在服务列表栏中会有MySQL的两个服务器:如果启动第一项MySQL服务器就只能操作数据库,外界不 ...