使用jquery自動播放div內的內容

Question

我在不同的div中有一些內容，我想在不點擊任何標籤的情況下顯示。我已經能夠通過點擊來切換這些內容的可見性，但我真的更喜歡它通過使用jquery自動顯示在循環中。下面是我的代碼

$(document).ready(function(){ 
 
     $('#advantages').click(function(){ 
 
     $('#featureContent').fadeOut(400).addClass('hidden'); 
 
     $('#advantageContent').fadeIn(400).removeClass('hidden'); 
 
     $('#benefitsContent').fadeOut(400).addClass('hidden'); 
 
     }); 
 

 
     $('#benefits').click(function(){ 
 
      $('#featureContent').fadeOut(400).addClass('hidden'); 
 
      $('#advantageContent').fadeOut(400).addClass('hidden'); 
 
      $('#benefitsContent').fadeIn(400).removeClass('hidden'); 
 
     }); 
 

 
     $('#features').click(function(){ 
 
     $('#featureContent').fadeIn(400).removeClass('hidden'); 
 
     $('#advantageContent').fadeOut(400).addClass('hidden'); 
 
     $('#benefitsContent').fadeOut(400).addClass('hidden'); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="featureLinks" class="col-lg-6 col-md-6 col-sm-6"> 
 
      <ul class="text-center"> 
 
       <li id="features"> Smart travel </li> 
 
       <li id="advantages"> Smart route </li> 
 
       <li id="benefits"> Smart payment </li> 
 
      </ul> 
 
     </div> 
 

 
    <div id="featureContent" class="col-lg-6 col-md-6 col-sm-6"> 
 
      <h2 class="text-center"> Smart travel </h2> 
 
      <ul> 
 
       <li>All your favourite transit service providers like Uber, KLM, Great Western Rail and Blue Star Ferries on one integrated app! </li> 
 
       
 
       <li>Compare the availability, price and ETA for taxis/buses, flights, metro andferries, anytime and anywhere. 
 
       </li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="advantageContent" class="col-lg-6 col-md-6 col-sm-6 hidden"> 
 
     <h2 class="text-center"> Smart Route </h2> 
 
      <ul> 
 
       <li> Big data is finally at your service</li> 
 
      <li>Go where you&#39;ve never gone before with integrated Satellite navigation system.</li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="benefitsContent" class="col-lg-6 col-md-6 col-sm-6 hidden"> 
 
     <h2 class="text-center"> Smart Payment </h2> 
 
      <ul> 
 
       <li> Experience the ease and security of paying via the app. </li> 
 
     </ul> 
 
</div>

Answer 1

@Yemmy這裏是一個簡單的例子這將遍歷這些動畫10次，直到我= 10.你需要，使其顯示爲您編輯延誤喜歡它。

$(document).ready(function(){ 
      var i = 0; 
     while (i < 10){ 
     $('#featureContent').fadeOut(400).addClass('hidden').delay(400); 
     $('#advantageContent').fadeIn(400).removeClass('hidden').delay(400); 
     $('#benefitsContent').fadeOut(400).addClass('hidden').delay(400); 



      $('#featureContent').fadeOut(400).addClass('hidden').delay(400); 
      $('#advantageContent').fadeOut(400).addClass('hidden').delay(400); 
      $('#benefitsContent').fadeIn(400).removeClass('hidden').delay(400); 



     $('#featureContent').fadeIn(400).removeClass('hidden').delay(400); 
     $('#advantageContent').fadeOut(400).addClass('hidden').delay(400); 
     $('#benefitsContent').fadeOut(400).addClass('hidden').delay(400); 
     i++ 
     }; 
    }); 

小提琴：https://jsfiddle.net/nn4hgrv2/#&togetherjs=kcgRhDRIGb

Answer 2

您可以使用window.setInterval反覆調用一個函數，異步，一個計時器。我在下面的代碼片段中展示了一個例子。

$(document).ready(function(){ 
 
     var rotateElements = [ $('#featureContent'), $('#advantageContent'), $('#benefitsContent') ]; 
 
     var displayedIndex = 0; 
 

 
     window.setInterval(function() { 
 
     if (displayedIndex > rotateElements.length) displayedIndex = 0; 
 
      
 
     for (var i = 0; i < rotateElements.length; ++i) { 
 
      if (i == displayedIndex) 
 
      rotateElements[i].fadeIn(400).removeClass('hidden'); 
 
      else 
 
      rotateElements[i].fadeOut(400).addClass('hidden'); 
 
     } 
 
      
 
     displayedIndex++; 
 
     }, 3000); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="featureLinks" class="col-lg-6 col-md-6 col-sm-6"> 
 
      <ul class="text-center"> 
 
       <li id="features"> Smart travel </li> 
 
       <li id="advantages"> Smart route </li> 
 
       <li id="benefits"> Smart payment </li> 
 
      </ul> 
 
     </div> 
 

 
    <div id="featureContent" class="col-lg-6 col-md-6 col-sm-6"> 
 
      <h2 class="text-center"> Smart travel </h2> 
 
      <ul> 
 
       <li>All your favourite transit service providers like Uber, KLM, Great Western Rail and Blue Star Ferries on one integrated app! </li> 
 
       
 
       <li>Compare the availability, price and ETA for taxis/buses, flights, metro andferries, anytime and anywhere. 
 
       </li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="advantageContent" class="col-lg-6 col-md-6 col-sm-6 hidden"> 
 
     <h2 class="text-center"> Smart Route </h2> 
 
      <ul> 
 
       <li> Big data is finally at your service</li> 
 
      <li>Go where you&#39;ve never gone before with integrated Satellite navigation system.</li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="benefitsContent" class="col-lg-6 col-md-6 col-sm-6 hidden"> 
 
     <h2 class="text-center"> Smart Payment </h2> 
 
      <ul> 
 
       <li> Experience the ease and security of paying via the app. </li> 
 
     </ul> 
 
</div>