<!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. 12、scala隐式转换与隐式参数

    一.隐式转换 1.介绍 Scala提供的隐式转换和隐式参数功能,是非常有特色的功能.是Java等编程语言所没有的功能.它可以允许你手动指定,将某种类型的对象转换成其他类型的对象. 通过这些功能,可以实 ...

  2. 6.6 安装IDEA

    非常感谢Kevin指导.让我简化了安装步骤.安装包可以直接到我的公司文件夹中sunny文件夹中获取. 首先准备好安装包: 然后打开终端: 解压,进入bin目录,执行idea.sh;或者,直接运行: b ...

  3. filter与servlet的比较

    filter与servlet的比较   主要从如下四个方面介绍他们之间的区别:                1.概念.                2.生命周期.                3 ...

  4. IOS 完成来电归属地

    首先是一个库:(有时间在上传) 然后设置一个工具类 .h @interface HMFoundLocation : NSObject AS_SINGLETON(HMFoundLocation) @pr ...

  5. MySql中存储过程的理解

    到底什么是存储过程,又为什么需要使用存储过程? 存储过程简单来说,就是为以后的使用而保存的一条或多条MySQL语句的集合,可将其视为批文件,虽然它们的作用不仅限与批处理. 使用存储过程有3个主要的好处 ...

  6. ERROR 1010 (HY000): Error dropping database (can't rmdir './nsd', errno: 39)

    在删除数据库的时候报标题所示错误 mysql> drop database test; ERROR 1010 (HY000): Error dropping database (can't rm ...

  7. c/c++/c# 快速计算 Cumulative Normal Distribution 正态累积函数CDF

    链接: http://stackoverflow.com/questions/2328258/cumulative-normal-distribution-function-in-c-c http:/ ...

  8. 洛谷P3792 由乃与大母神原型和偶像崇拜

    P3792 由乃与大母神原型和偶像崇拜 题目背景 由乃最近没事干,去研究轻拍学去了 就是一个叫做flip flappers,轻拍翻转小膜女的番 然后研究的过程中她看到了一个叫做大母神原型的东西 大母神 ...

  9. 原生 Ajax 封装 和 Axios 二次 封装

    AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...

  10. [USACO1.4]等差数列 Arithmetic Progressions

    题目描述 一个等差数列是一个能表示成a, a+b, a+2b,..., a+nb (n=0,1,2,3,...)的数列. 在这个问题中a是一个非负的整数,b是正整数.写一个程序来找出在双平方数集合(双 ...