Bootstrap实现的图片轮动

最新推荐文章于 2021-01-31 23:15:28 发布

原创最新推荐文章于 2021-01-31 23:15:28 发布 · 987 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何利用Bootstrap框架创建一个功能完善的图片轮播效果，包括必要的HTML结构、CSS样式和JavaScript组件。通过实例代码展示，帮助读者理解并实现图片轮播功能。

代码：

<div style="width:580px;height:auto;margin:10px auto;">

            <div id="slidershow" class="carousel slide" >

                <ol class="carousel-indicators">

                    <li class="active" data-target="#slidershow" data-slide-to="0"></li>

                    <li data-target="#slidershow" data-slide-to="1"></li>

                    <li data-target="#slidershow" data-slide-to="2"></li>

                </ol>

                <div class="carousel-inner">

                    <div class="item active">

                        <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>

                        <div class="carousel-caption">

                            <h3>标题</h3>

                            <p>描述</p>

                        </div>

                    </div>

                    <div class="item">

                        <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>

                    </div>

                    <div class="item">

                        <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>

                    </div>

                </div> 

                <a class="left carousel-control" href="#slidershow" data-slide="prev">

                    <span class="glyphicon glyphicon-chevron-left"></span>

                </a>

                <a class="right carousel-control" href="#slidershow" data-slide="next">

                    <span class="glyphicon glyphicon-chevron-right"></span>

                </a>  

              </div>

          </div>