Bootstrap学习之Carousel

最新推荐文章于 2024-08-16 09:23:05 发布

_panda_

最新推荐文章于 2024-08-16 09:23:05 发布

阅读量897

点赞数

本文链接：https://blog.csdn.net/qq_18832439/article/details/48091435

版权

这是bootstrap的一个js插件，使用的时候需要引入bootstrap的库，而bootstrap的是在jQuery的基础下运行的。

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

A slideshow component for cycling through elements, like a carousel. Nested carousels are not supported.

这是一个滑动栏。

这是一些关键词

1： Initial active element required：The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.

class="active"

active类是默认被选中第一个展示

2：

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

每个item类可以加以阐述

3：可以改变延迟扩展的时间

4：或者我们用js来实现

Methods

`.carousel(options)`

Initializes the carousel with an optional options object and starts cycling through items.

复制

$('.carousel').carousel({
  interval: 2000
})

5：效果图

以下是具体代码实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <title></title>
    <style>
        #carousel-example-generic{
            width: 800px;
            height: auto;
            margin-left: auto;
            margin-right: auto;
            margin-top: 60px;
            margin-bottom: 80px;

        }
    </style>
</head>
<body>
<div id="carousel-example-generic" style="text-align: center" class="carousel slide"  data-ride="carousel" data-interval="3000" >
    <!-- Indicators -->
    <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>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        <li data-target="#carousel-example-generic" data-slide-to="5"></li>
        <li data-target="#carousel-example-generic" data-slide-to="6"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/manchester_city1.jpg" alt="...">
                <div class="carousel-caption">
                    <h3></h3>
                </div>
            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <img src="images/manchester_city2.jpg" alt="...">

            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <img src="images/manchester_city3.jpg" alt="...">

            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <img src="images/manchester_city4.jpg" alt="...">

            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <img src="images/manchester_city5.jpg" alt="...">

            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <img src="images/manchester_city6.jpg" alt="...">

            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <img src="images/manchester_city7.jpg" alt="...">

            <div class="carousel-caption">

            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>
<script>
    $('.carousel').carousel({
        interval: 2000;
    })
</script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>