轮播图（Bootstrap）

来源：互联网发布：域名在线评估编辑：程序博客网时间：2024/06/03 09:43

效果图如下：
这里写图片描述

 <div class="carousel slide" id="carousel2">                            <ol class="carousel-indicators">                                <li data-slide-to="0" data-target="#carousel2" class="active"></li>                                <li data-slide-to="1" data-target="#carousel2"></li>                                <li data-slide-to="2" data-target="#carousel2" class=""></li>                            </ol>                            <div class="carousel-inner">                                <div class="item active">                                    <img alt="image" class="img-responsive" src="img/p_big1.jpg">                                    <div class="carousel-caption">                                        <p>This is simple caption 1</p>                                    </div>                                </div>                                <div class="item ">                                    <img alt="image" class="img-responsive" src="img/p_big3.jpg">                                    <div class="carousel-caption">                                        <p>This is simple caption 2</p>                                    </div>                                </div>                                <div class="item">                                    <img alt="image" class="img-responsive" src="img/p_big2.jpg">                                    <div class="carousel-caption">                                        <p>This is simple caption 3</p>                                    </div>                                </div>                            </div>                            <a data-slide="prev" href="carousel.html#carousel2" class="left carousel-control">                                <span class="icon-prev"></span>                            </a>                            <a data-slide="next" href="carousel.html#carousel2" class="right carousel-control">                                <span class="icon-next"></span>                            </a>                        </div>

备注：
如果把carousel-caption这个类修改为text-center,效果图变成下面：

这里写图片描述

备注：

carousel-control             控制左右箭头的显示与否data-slide                   控制轮播图的动作carousel-inner 配合item       包含了很多轮播图carousel-indicators          底部的一排圆圈id                           具体代表哪个轮播图

FR:海涛高软（QQ技术交流群：386476712）

0 0

轮播图 （Bootstrap）

轮播图（Bootstrap）