<!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. DOS查看端口占用及杀掉进程命令

    转载自:http://www.cnblogs.com/rainman/p/3457227.html 1. 查看端口占用 在windows命令行窗口下执行: netstat -aon|findstr & ...

  2. Python及R安装包版本查看方法

    R包查询 查询已安装的所有的包:library() 或installed.packages()(括号内为空,区别以上两项) 查询具体包的信息: help(package="pheatmap& ...

  3. MVC项目中的分页实现例子

    在开发项目中,写了一个分页实现的例子,现在把源代码贴上,以供以后写代码时参考 在列表的头部,有如下显示, 这个代表一个页面显示10条记录,总共22条记录. 这个是页面底部的显示 那么如何来显示这个分页 ...

  4. 20169219linux 内核原理与分析第四周作业

    系统调用 系统调用是用户空间访问内核的唯一手段:除异常和陷入外,它们是内核唯一的合法入口. 一般情况下,应用程序通过在用户空间实现的应用编程接口(API)而不是直接通过系统调用来编程. 要访问系统调用 ...

  5. DropDownList绑定数据库

    this.DropDownList_设备列表.DataSource = dt_eq;//设置数据源 this.DropDownList_设备列表.DataTextField = "equip ...

  6. [CentOS7] SELinux

    声明:本文主要总结自:鸟哥的Linux私房菜-第十六章.程序管理與 SELinux 初探,如有侵权,请通知博主 SELinux = Security Enhanced Linux 传统的文件权限与账号 ...

  7. 洛谷P3380 【模板】二逼平衡树（树套树）（线段树+树状数组）

    P3380 [模板]二逼平衡树(树套树) 题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作: 查询k在区间内的排名 查询区间内排名为k的值 修改某一位值上的数 ...

  8. iOS拼图

       #import "ViewController.h" @interface ViewController () @end @implementation ViewContro ...

  9. gitlab web端使用

    https://jenkins.io/zh/doc/pipeline/tour/getting-started/ http://www.cnblogs.com/cheng95/p/6542036.ht ...

  10. 解决Nginx启动失败

    一.Nginx下载http://nginx.org/en/download.html 二.Nginx启动失败原因1.本人下载的是nginx-1.12.1(稳定版),下载完解压后,进入路径中,start ...