为什么使用bootstrap在一个页面同时做两个轮播效果时，只有第一个有效？？

我们都知道使用bootstrap做轮播效果非常快，但是有时候一个页面会需要两个轮播；但这个时候再次使用bootstrap做轮播效果时就会失效；原因在于bootstrap的Carousel问题，只要修改一下id，就好了~~

这是第一个轮播：（未做修改）

    <div >
                                                <!-- 轮播（Carousel）指标 -->
                                                <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>
                                                        <li data-target="#myCarousel" data-slide-to="3"></li>                                                       
                                                </ol>   
                                                <!-- 轮播（Carousel）项目 -->
                                                <div class="carousel-inner">
                                                        <div class="item active">
                                                                <img src="./zt-img/lb1.jpg" alt="First slide" height="400px" width="100%">
                                                        </div>                                                    
                                                        <div class="item">
                                                                <img src="./zt-img/lb3.jpg" alt="Third slide"  width="100%">
                                                        </div>
                                                        <div class="item">
                                                                <img src="./zt-img/lb4.jpg" alt="Second slide" width="100%">
                                                        </div>
                                                        <div class="item">
                                                                <img src="./zt-img/lb5.jpg" alt="Third slide"  width="100%">
                                                        </div>
                                                </div>
                                                <!-- 轮播（Carousel）导航 -->
                                                <a class="carousel-control left" href="#myCarousel" 
                                                   data-slide="prev"></a>
                                                <a class="carousel-control right" href="#myCarousel" 
                                                   data-slide="next"></a>
                                        </div>     <!---->  

　　这是第二个轮播：（已修改）

1. 修改轮播动画的id属性

2. 修改ol li 内的data-target属性为你修改后的id

全部的data-target="#myCarousel" 改为 data-target="#myCarousela"

3. 修改a标签的href属性为#修改后的id

全部的href="#myCarousel"改为href="#myCarousela"

    <div >
                                                <!-- 轮播（Carousel）指标 -->
                                                <ol class="carousel-indicators">
                                                        <li data-target="#myCarousela" data-slide-to="0" class="active"></li>
                                                        <li data-target="#myCarousela" data-slide-to="1"></li>
                                                        <li data-target="#myCarousela" data-slide-to="2"></li>
                                                        <li data-target="#myCarousela" data-slide-to="3"></li>                                                      
                                                </ol>   
                                                <!-- 轮播（Carousel）项目 -->
                                                <div class="carousel-inner">
                                                        <div class="item active">
                                                                <img src="./zt-img/lb1.jpg" alt="First slide" height="400px" width="100%">
                                                        </div>                                                    
                                                        <div class="item">
                                                                <img src="./zt-img/lb3.jpg" alt="Third slide"  width="100%">
                                                        </div>
                                                        <div class="item">
                                                                <img src="./zt-img/lb4.jpg" alt="Second slide" width="100%">
                                                        </div>
                                                        <div class="item">
                                                                <img src="./zt-img/lb5.jpg" alt="Third slide"  width="100%">
                                                        </div>
                                                </div>
                                                <!-- 轮播（Carousel）导航 -->
                                                <a class="carousel-control left" href="#myCarousela" 
                                                   data-slide="prev"></a>
                                                <a class="carousel-control right" href="#myCarousela" 
                                                   data-slide="next"></a>
                                        </div>     <!---->