<!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. 自定义map对象，用于再不支持es6的map的时候

    function Map() {        this.elements = new Array();        // 获取Map元素个数        this.size = function ...

  2. App知识点汇总

    1.Fragment 2.AndroidStudio 用夜神安卓模拟器调试 进入夜神模拟器安装目录下的bin目录,执行nox_adb.exe connect 127.0.0.1:62001,Andro ...

  3. ListBox点击改变相应的值

    private void lbCity_SelectedIndexChanged(object sender, EventArgs e) { 写逻辑 }

  4. Java学习笔记（一）语法

    基本语法 大小写敏感 类名:对于所有的类来说,类名的首字母应该大写 方法名:所有的方法名都应该以小写字母开头.如果方法名含有若干单词,则后面的每个单词首字母大写. 源文件名:源文件名必须和类名相同.当 ...

  5. SpringFox 初体验

    本文来自网易云社区. 1.什么是SpringFox? 1.1 Springfox 是一个开源的API Doc的框架, 它的前身是swagger-springmvc,可以将我们的Controller中的 ...

  6. php文件上传（视频图片或者其他）

    html页面 <html> <head> <meta charset="utf-8"> <title></title> ...

  7. bzoj 4974: [Lydsy八月月赛]字符串大师

    4974: [Lydsy八月月赛]字符串大师 Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 371  Solved: 190[Submit][Statu ...

  8. MCP|LDY|Mass Spectrometry-based Absolute Quantification of 20S Proteasome Status for Controlled Ex-vivo Expansion of Human Adipose-derived Mesenchymal Stromal/Stem Cells（基于质谱技术的20S蛋白酶体绝对定量方法监控人体脂肪...

    期刊名:Mol Cell Proteomics 发表时间:(2019年4月) IF:5.232   概述 20S蛋白酶体是一种多亚基蛋白质复合物,参与许多组织细胞生命活动过程.本研究基于SILAC标记 ...

  9. 通过sql语句对MySql数据库的基本操作

    一.数据库的基本操作 CREATE DATABASE mybookstore; DROP DATABASE mybookstore; 二.表的基本操作 1.创建表 insert into 表名(字段名 ...

  10. Git Remote (转)

    基本使用 git是一个分布式代码管理工具,所以可以支持多个仓库,在git里,服务器上的仓库在本地称之为remote. 直接clone一个仓库: $: git clone git@search.ued. ...