码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap 学习笔记 轮播(Carousel)插件

时间:2015-05-27 18:40:32      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:

Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除些之外,内容也是足够灵活的,可以是图像,内嵌框架,视频或者其他您想要旋转的任何类型的内容。

示例:

下面是不念旧恶简单的幻灯片,使用bootstrap轮播carousel插件显示了一个循环播放元素的通用性组件。为了实现轮播,您只需要添加带有该标记的代码即可。不需要使用data属性,只需要简单的基于class的开发即可。

技术分享

 

 

可选的标题

您可以通过item内的carousel-caption元素向幻灯片添加标题,只需要在该处放置任何可选的html即可,它会自动对齐并格式化。

  <img alt="first" src="~/Images/02.png" />
  <div class="carousel-caption">标题 2</div>

 

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:

选项名称类型/默认值Data 属性名称描述
interval number
默认值:5000
data-interval 自动循环每个项目之间延迟的时间量。如果为 false,轮播将不会自动循环。
pause string
默认值:"hover"
data-pause 鼠标进入时暂停轮播循环,鼠标离开时恢复轮播循环。
wrap boolean
默认值:true
data-wrap 轮播是否连续循环。

设置轮播时间间隔为2000ms.

$(‘#myCarousel1‘).carousel({
    interval: 2000
});

 

全部html

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Scrollspy</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.1.3.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <h2>Carousel</h2>
    <div id="myCarousel1" class="carousel slide" data-interval="5000">
        @*轮播指标*@
        <ol class="carousel-indicators">
            <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel1" data-slide-to="1"></li>
            <li data-target="#myCarousel1" data-slide-to="2"></li>
            <li data-target="#myCarousel1" data-slide-to="3"></li>
        </ol>
        @*轮播项目*@
        <div class="carousel-inner">
            <div class="item active">
                <img alt="first" src="~/Images/01.png" />
                <div class="carousel-caption">标题 1</div>
            </div>
            <div class="item">
                <img alt="first" src="~/Images/02.png" />
                <div class="carousel-caption">标题 2</div>
            </div>
            <div class="item">
                <img alt="first" src="~/Images/03.png" />
                <div class="carousel-caption">标题 3</div>
            </div>
            <div class="item">
                <img alt="first" src="~/Images/04.png" />
                <div class="carousel-caption">标题 4</div>
            </div>
        </div>
    </div>
    <!-- 轮播(Carousel)导航 -->
    <a class="carousel-control left" href="#myCarousel1"
        data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel1"
        data-slide="next">&rsaquo;</a>
    <script>
        $(function () {
            $(#myCarousel1).carousel({
                interval: 2000
            });
        })
    </script>
</body>
</html>

本节完

 

bootstrap 学习笔记 轮播(Carousel)插件

标签:

原文地址:http://www.cnblogs.com/langhua/p/4533994.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!