轮播请查看下面演示样例。基本已经涵盖最经常使用的一个轮播

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>js插件_轮播</title>

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

    <!--<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">-->

    <script src="js/jquery-1.11.1.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <style type="text/css">

        .myCarousel{

            width:50%;

        }

    </style>

</head>

<body>

<div class="container myCarousel">

    <div id="carousel-example-generic" class="carousel slide">

        <ol class="carousel-indicators">

            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

            <li data-target="#carousel-example-generic" data-slide-to="1" ></li>

            <li data-target="#carousel-example-generic" data-slide-to="2" ></li>

        </ol>

        <div class="carousel-inner">

            <div class="item active">

                <img src="images/1.jpg"/>

                <div class="carousel-caption">

                    <h3>宅男女神1</h3>

                    <p>人气偶像票选890张</p>

                </div>

            </div>

            <div class="item">

                <img src="images/2.jpg"/>

                <div class="carousel-caption">

                    <h3>宅男女神2</h3>

                    <p>人气偶像票选1234张</p>

                </div>

            </div>

            <div class="item">

                <img src="images/3.jpg"/>

                <div class="carousel-caption">

                    <h3>宅男女神3</h3>

                    <p>人气偶像票选7836张</p>

                </div>

            </div>

        </div>

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

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

        </a>

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

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

        </a>

    </div>

</div>

<script>

    //设置图片切换时间，默认是5秒；

    $(".carousel").carousel({

        interval:2000

    })

</script>

</body>

</html>

Bootstrap的js插件之轮播(carousel)的更多相关文章

  1. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  2. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  3. Bootstrap 轮播(Carousel)插件

    轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是非常灵活的.可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型. 下面是一个简单的幻灯片,使用轮播(carousel)插件显示 ...

  4. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. 《玩转Bootstrap（JS插件篇）》笔记

    导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...

  6. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  7. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  8. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  9. 第二百五十一节，Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

随机推荐

  1. flask调试代码更改、模板更改后立即生效

    1.app.DEBUG=True时,代码更改后立即生效 2.APP.jinja_env.auto_reload = True时,模板修改后立即生效,无需重启 参考:https://stackoverf ...

  2. apache 的rewrite函数配置伪静态

    配置伪静态目的:对于访问比较长的uri,利于网站搜索工具更容易记住,换句话利于SEO 在配置文件中添加或找到 <IfModule mod_rewrite.c> </IfModule& ...

  3. 论坛中不同类型的贴的排序问题(涉及数据库的：CASE... END)

    在论坛中,会有不同类型的帖子,比如说:普通贴.精华帖.置顶帖: 论坛的这些贴子会根据不同的类型进行排序,当然不仅仅只是看帖子类型,还有贴子的动态情况来进行排序. 在这里演示一下简单的帖子排序,我们只关 ...

  4. 用new和delete运算符进行动态分配和撤销存储空间

    測试描写叙述:暂时开辟一个存储空间以存放一个结构体数据 #include <iostream> #include <string> using namespace std; s ...

  5. CentOS7下挂载硬盘笔记

    CentOS7下挂载硬盘笔记 准备工作 机器:DELL R730 系统:CentOS 7.4.1708 (Core) x86_64 新增硬盘:三星960PRO 关闭服务器加上新硬盘,然后重启 查看硬盘 ...

  6. iOS_block代码块

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  7. Java虚拟机对锁优化所做的努力(读书笔记)

    锁偏向      是一种加锁操作的优化手段,他的核心思想是:如果一个线程获得了锁,那么就进入偏向模式,当这个线程再次请求锁时,无须在做任何同步操作,因此在几乎没有锁竞争的场合,偏向锁是比较好的优化效果 ...

  8. C++ 设置控制台输出颜色

    #include <stdint.h> #include <iostream> #include <string> #include <Windows.h&g ...

  9. Yii2数据库分页操作方法介绍

    本章节将介绍怎样怎样创建一个从数据表 country 中获取国家数据并显示出来的页面. 为了实现这个目标,你将会配置一个数据库连接.创建一个活动记录类,而且创建一个操作及一个视图. 贯穿整个章节,你将 ...

  10. 你真的了解装箱(Boxing)和拆箱（Unboxing）吗？

    所谓装箱就是装箱是将值类型转换为 object 类型或由此值类型实现的任一接口类型的过程.而拆箱就是反过来了.很多人可能都知道这一点,但是是否真的就很了解boxing和unboxing了呢?可以看下下 ...