html JavaScript:使用jQuery连续循环遍历子项

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html JavaScript:使用jQuery连续循环遍历子项相关的知识,希望对你有一定的参考价值。

<html>
  <head>
    <style>
      #items{ margin:0; padding:0; }
      /* hide all items initially */
      #items li{ display:none; list-style:none; position:absolute; }
      /* show the item that has the 'show' class */
      #items li.show{ display:block; }
    </style>  
  </head>
  
  <body>
    <ul id="items">
      <li class="show">Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
    
    <!-- include jQuery core code -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
      function textloop() {
        // get the item that currently has the 'show' class
        var current = $("#items .show");
        /*
         * find the next item with some help from jQuery's ternary operator
         * the syntax for the ternary operator is 'a ? b : c'
         * in other words 'if a is true return b otherwise return c'
         */
        var next = current.next().length ? current.next() : current.parent().children(':first');
        // fade out the current item and remove the 'show' class
        current.fadeOut(3000,function(){
          // fade in the next item and add the 'show' class
          next.fadeIn("slow").addClass("show");
        }).removeClass("show");
        
        // repeat by calling the textloop method again after 3 seconds
        setTimeout(textloop,3000);
      }

      // call the text loop method when the page loads
      textloop();
    });
    </script>
  </body>
</html>

以上是关于html JavaScript:使用jQuery连续循环遍历子项的主要内容,如果未能解决你的问题,请参考以下文章

请问jQuery是用来干啥的?

使用 ajax 验证 jquery / 标准 javascript 提交表单

如何使用 javascript/jquery 将大型 html 块附加到刀片文件?

使用 Javascript/jQuery 从 HTML 元素中获取所有属性

使用 Jquery 在 JavaScript 变量中编辑 HTML

加载 angularjs 视图后加载 jquery 模块?