我在页面底部添加了第二个旋转木马，但现在我原来的Carousel上一张图片在幻灯片滑动到下一张图片时出现重影。我仔细检查我的所有代码，它看起来很好。任何想法，将不胜感激。这是网站：[vmzsoftsolutions] [1]顺便说一下，两个轮播都有不同的id，java脚本也相应地引用。我也检查图像大小，它们都是相同的大小。任何想法，将不胜感激。谢谢
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
<!-- Script for Carousel2 -->
<script>
$('#myCarousel2').carousel({
interval: 5000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
</script>
<!-- Script for Carousel2 --><header id="myCarousel" class="carousel slide" style="height:400px">
<!-- Indicators -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image: url(_images/Rowing_S.jpg);"></div>
<div class="carousel-caption" id="cap">
<h1 class="mission-statement col-lg-9 col-lg-offset-2" style="font-family: lato; font-style: normal; font-weight: 800; text-shadow: -2px 0px 2px rgba(0,0,0,1.00); font-size: 37px;">WEB DEVELOPMENT SOLUTIONS </h1>
<h2 class="company col-lg-5 col-lg-offset-4" style="font-family: lato; font-style: normal; font-weight: 400; color: #ffffff;"> Where precision triumphs speed</h2>
<h2><a href="about.html" class="btn btn-default btn-car1">Learn More</a></h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image: url(_images/Bridge.jpg);"></div>
<div class="carousel-caption" id="cap-2">
<h1 class="social-networks" style="font-family: lato; font-style: normal; font-weight: 400; font-size: 50px;">SOCIAL NETWORKS </h1>
<h2 class="customers" style="font-weight: 300"> Connecting your customers to your business</h2>
<h3><a href="services.html" class="btn btn-default btn-social">Learn More</a></h3>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url(_images/Mobile1.jpg);"></div>
<div class="carousel-caption" id="cap-3">
<h1 class="mobile" style="font-family: lato; font-style: normal; font-weight: 400; font-size: 50px;">MOBILE APPS </h1>
<h2 class="customers"> Accessing your Applications on the go has never been easier</h2>
<h2><a href="services.html#service-two" class="btn btn-default btn-mobile-car">Learn More</a></h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image: url(_images/Portfolio1.jpg);"></div>
<div class="carousel-caption" id="cap-4">
<h1 class="mobile" style="font-family: lato; font-style: normal; font-weight: 400; font-size: 50px;"></h1>
<h2 class="portfolio"> Our work so far</h2>
<h2><a href="portfolio.html" class="btn btn-default" id="portfoliio-btn">Learn More</a></h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev scroll-icons"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next scroll-icons"></span>
</a>
</header>` <div class="row" id="portfolio-row">
<div class="col-lg-12" id="col-portfolio-title">
<h2 class="page-header" id="page-header-portfolio">Portfolio</h2>
</div>
<div class="col-md-10 col-md-offset-1">
<div class="carousel slide" id="myCarousel2">
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4"><a href="whittieradhc.html"><img src="_images/whittieradh_edit.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4"><a href="pizzaroni_mobile.html"><img src="_images/PortfolioPizza1.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4"><a href="MHCourier_ResponsiveSite.html"><img src="_images/Portfolio6.png" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4"><a href="MHCourier_Access_DB.html"><img src="_images/MHCourier_OrderEntry_2_2.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4"><a href="vocinnovations.html"><img src="_images/Portfolio5.jpg" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-md-4"><a href="elite.html"><img src="_images/Portfolio6.jpg" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel2" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>