我有一个MVC5应用程序,在我的一个视图中,我有一个轮播,定义为以下代码。关键是它显示还可以,我可以通过单击左箭头或右箭头或使用这些点来浏览轮播的幻灯片。但是,当我打开视图轮播时,它位于第一张幻灯片中,并且不会在其他幻灯片中移动。我必须在3秒后让它更换幻灯片,然后当涉及到最后一个幻灯片时,要返回到第一张幻灯片,我还想保留手动幻灯片更改的功能。我想我需要一些JS代码,但不知道该由谁来实现,我尝试了一些使用setInterval并在下一张幻灯片中添加“活动”类的事情,但是没有运气。这是我的轮播代码:
<div id="myCarousel" class="carousel slide" style="margin-top:-22px; margin-left:-15px; margin-right:-15px;">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="~/Content/img/auto.png" alt="slid0" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/business.png" alt="slid1" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/exercise.png" alt="slid2" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/healthcare.png" alt="slid3" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/lawn.png" alt="slid4" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="~/Content/img/hair.png" alt="slid5" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
任何想法,如何解决问题?
最佳答案
你可以加
data-ride="carousel" data-interval="3000"
尝试这个
jsFiddle
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style="margin-top:-22px; margin-left:-15px; margin-right:-15px;">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/600/200/" alt="slid0" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid1" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid2" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid3" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid4" class="img-responsive">
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="http://lorempixel.com/600/200/" alt="slid5" class="img-responsive">
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>