用bootstrap实现图片的轮播

来源：互联网发布：德国统一知乎编辑：程序博客网时间：2024/04/30 19:16

记得导入bootstrap.css,如果出现无法显示图标的情况，参见我的另一篇博文。

 <!--图片轮播-->    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">        <!--轮播图片的提示点-->        <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>        </ol>        <!--轮播图片-->        <div class="carousel-inner" role="listbox">            <div class="item active">                <img src="../images/carousel1.jpg" alt="1">                <div class="carousel-caption">                    <h4>教学天地</h4><!--可以设置浮动在图片上面的文字-->                    <p>这个大学是华南地区唯一一所医药大学</p>                </div>            </div>            <div class="item ">                <img src="../images/carousel2.jpg" alt="2">                <div class="carousel-caption"></div>            </div>            <div class="item ">                <img src="../images/carousel2.jpg" alt="3">                <div class="carousel-caption"></div>            </div>        </div>        <!--左右滑动图标-->        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">            <span class="glyphicon glyphicon-chevron-left" ></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></div>

1 0