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次，直到i = 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>

用jquery自动播放div中的内容

2 个答案: