案例:Bootstrap案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8"> 
5
    <title>Bootstrap 实例 - 轮播(Carousel)插件方法</title>
6
    <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">
7
    <script src="/js/bootstrap/jquery.min.js"></script>
8
    <script src="/js/bootstrap/bootstrap3.3.7.min.js"></script>
9
</head>
10
<body>
11
12
<div id="myCarousel" class="carousel slide">
13
    <!-- 轮播(Carousel)指标 -->
14
    <ol class="carousel-indicators">
15
        <li data-target="#myCarousel" data-slide-to="0" 
16
            class="active"></li>
17
        <li data-target="#myCarousel" data-slide-to="1"></li>
18
        <li data-target="#myCarousel" data-slide-to="2"></li>
19
    </ol>   
20
    <!-- 轮播(Carousel)项目 -->
21
    <div class="carousel-inner">
22
        <div class="item active">
23
            <img src="/img/shanghai_lupu_bridge.jpg" alt="First slide">
24
        </div>
25
        <div class="item">
26
            <img src="/img/eg_landscape2.jpg" alt="Second slide">
27
        </div>
28
        <div class="item">
29
            <img src="/img/eg_landscape3.jpg" alt="Third slide">
30
        </div>
31
    </div>
32
    <!-- 轮播(Carousel)导航 -->
33
    <a class="carousel-control left" href="#myCarousel" 
34
       data-slide="prev">&lsaquo;</a>
35
    <a class="carousel-control right" href="#myCarousel" 
36
       data-slide="next">&rsaquo;</a>
37
    <!-- 控制按钮 -->
38
    <div style="text-align:center;">
39
        <input type="button" class="btn start-slide" value="Start">
40
        <input type="button" class="btn pause-slide" value="Pause">
41
        <input type="button" class="btn prev-slide" value="Previous Slide">
42
        <input type="button" class="btn next-slide" value="Next Slide">
43
        <input type="button" class="btn slide-one" value="Slide 1">
44
        <input type="button" class="btn slide-two" value="Slide 2">            
45
        <input type="button" class="btn slide-three" value="Slide 3">
46
    </div>
47
</div> 
48
<script>