如何在幾秒鐘後自動移動傳送帶的幻燈片？

Question

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

任何想法，如何解決這個問題？

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>