booterStrap体验-首页改造-轮播图

     在没有接触booterStrap之前，写轮播图。方法有两种：一种是用css3动画进行编写，另一种是用js进行图片的位置改变。而在booterStrap中有一个carousel插件，可以方便快捷的进行轮播图编写。代码如下：

<div id="banner" class="carousel slide">
        <div class="container-fluid">
            <ol class="carousel-indicators">
                <li data-target="#banner" data-slide-to="0" class="active"></li>
                <li data-target="#banner" data-slide-to="1"></li>
                <li data-target="#banner" data-slide-to="2"></li>
            </ol>
            <ul class="carousel-inner">
                <li class="item active">
                    <a href="#">
                        <img src="img/banner1.jpg" alt="First slide">
                    </a>
                </li>
                <li class="item">
                    <a href="#">
                        <img src="img/banner2.jpg" alt="Second slide">
                    </a>
                </li>
                <li class="item">
                    <a href="#">
                        <img src="img/banner3.jpg" alt="Third slide">
                    </a>
                </li>
            </ul>
        </div>
    </div>

     首先carousel-indicators类用来修饰轮播标签，.carousel-inner用来修饰轮播图片。

     其中还是用到了data属性来控制轮播的位置。

     1.属性data-slide可接受关键字prev或next，用来改变幻灯片相对于当前位置的位置；

     2.使用data-slide-to来向轮播图传递一个原始滑动索引，索引从0开始计数；

     3.data-ride=”carousel”属性用来标记轮播在页面加载时就开始动画。

     尝试着在.carousel-inner和.carousel-indicator后加上data-ride=”carousel”，结果轮播图片在页面加载时自动变化，但轮播标签没有自动变化。且变化形式为消失显示，而不是从左向右。

     为了实现从左向右自动轮播，使用了js进行手动调用。

window.onload = function() {
                $("#banner").carousel({
                    interval: 2000
                })
                $("#banner").carousel('cycle');
            }

     $(“#banner”).carousel({ interval: 2000})，定义自动循环每个项目之间的延迟时间。如果为false，则不会自动循环。

     $(“#banner”).carousel(‘cycle’);定义从左向右循环轮播项目。