Javascript 如何在几秒钟后自动移动旋转木马的幻灯片？

我有一个MVC5应用程序，在我的一个视图中，我有一个旋转木马，定义如下代码。关键是它显示OK，我可以通过单击左箭头或右箭头或使用点在旋转木马的幻灯片中导航。但是当我打开视图旋转木马时，它在第一张幻灯片中，并且不会在其他幻灯片中移动。我必须在3秒钟后更改幻灯片，然后在最后一张幻灯片时，要返回到第一张幻灯片，我还希望保留手动更改幻灯片的功能。我想我需要一些JS代码，但不知道是谁实现的，我尝试了一些使用setInterval并在下一张幻灯片中添加“active”类的方法，但没有成功。这是我的旋转木马代码：

<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"

试试这个

可能会有帮助

<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>