Question

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

任何想法，如何解决问题？

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>

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

1 个答案: