我有一个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>

09-11 19:43
查看更多