Bootstrap carousel轮转图的使用

时间：2015-07-31 23:22:58 阅读：196 评论：0 收藏：0 [点我收藏+]

标签：

演示效果截图：

技术分享

代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <style>
            body {
                padding: 10px;
                margin: 10px;
            }
        </style>
    </head>

    <body>
        <div id="myCarousel" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>标题一</h4>
                        <p>图片一内容简介</p>
                    </div>
                </div>
                <div class="item">
                    <img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt="">
                    <div class="carousel-caption">
                        <h4>标题二/h4>
                   <p>图片二内容简介</p>
                </div>
            </div>
            <div class="item">
                <img src="http://images3.c-ctrip.com/rk/201403/yfdd580145a.png" alt="">
                <div class="carousel-caption">
                  <h4>标题三</h4>
                        <p>图片三内容简介</p>
                    </div>
                </div>
            </div>
            
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
        
        <script>
            $(‘.carousel‘).carousel()
        </script>
        
        
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script type="text/javascript" src="js/bootstrap.min.js" ></script>
            
        <!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>-->
        <!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
    </body>

</html>

View Code

http://www.imooc.com/code/5395

Bootstrap carousel轮转图的使用

标签：

原文地址：http://www.cnblogs.com/XDJjy/p/4693204.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行