javascript - 如何在几秒钟后自动移动轮播的幻灯片？

Question

我有一个 MVC5 应用程序，在我的一个 View 中有一个旋转木马，它定义为下面的代码。关键是它显示正常，我可以通过单击向左或向右箭头或使用点来浏览轮播的幻灯片。但是当我打开 View 轮播时，它位于第一张幻灯片中，并且不会在其他幻灯片中移动。我必须让它在 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>

有什么想法，如何解决这个问题？

Answer 1

可以添加

 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>