Bootstrap轮播图 - 世界之魂

Bootstrap轮播图

Bootstrap插件实现响应式轮播图

在开发响应式网站时，能自动适配屏幕的轮播图至关重要。原理十分简单，只要在标签后面加上特定的扩展类和钩子，调用插件中包含的方法即可。代码如下：

<!--轮播图 start
    ***
    ***
    -->
    <div  class="carousel slide">
        
        <!--圆点指针 start-->
        <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>
       
        
        <!--轮播图片 start-->
        <div class="carousel-inner">
            <div class="item active">
                <img class="img-responsive" src="images/1.jpg" alt="1">
            </div>
            <div class="item">
                <img class="img-responsive" src="images/2.jpg" alt="2">
            </div>
            <div class="item">
                <img class="img-responsive" src="images/3.jpg" alt="3">
            </div>                     
        </div>
        
        
        <!--轮播导航 start-->
        <a class="carousel-control left" data-slide="prev" href="#myCarousel" >&lsaquo;</a>
        <a class="carousel-control right" data-slide="next" href="#myCarousel" >&rsaquo;</a>
        
    </div>
    <!--轮播图 end
    ***
    ***
    -->