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

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

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

	<div id="myCarousel" class="carousel slide">
						<!-- 轮播（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> 	 <!--id="myCarousel"-->	

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

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

id="myCarousel"改为 id="myCarousela"

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

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

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

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

	<div id="myCarousela" class="carousel slide">
						<!-- 轮播（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> 	 <!--id="myCarousel"-->	

　　

 

转载于:https://www.cnblogs.com/chenguanai/p/7060547.html