Bootstrap学习之Carousel

Carousel carousel.js

这是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:可以改变延迟扩展的时间


Bootstrap学习之Carousel_第1张图片


4:或者我们用js来实现


.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>

以下是用到的图片Bootstrap学习之Carousel_第2张图片Bootstrap学习之Carousel_第3张图片Bootstrap学习之Carousel_第4张图片Bootstrap学习之Carousel_第5张图片


你可能感兴趣的:(html,jquery,bootstrap,插件,WebStrom)