在jquery中，可以使用setInterval()方法，定时控制元素轮流显示与隐藏，从而实现效果。下面小编举例讲解jQuery如何让元素轮流循环显示。

工具/原料

  • html+jquery
  • 代码编辑器：Dreamweaver CS5

方法/步骤

  1. 1

    新建一个html文件，命名为test.html，用于讲解jQuery如何让元素轮流循环显示。

  2. 2

    在test.html文件内，使用div标签创建一个模块，在div标签内，使用p标签创建三行文字，下面将实现p标签内容轮流循环显示。

  3. 3

    在js标签内，通过“$(function(){});”实现在页面加载完成时，执行function内的代码。

  4. 4

    在function（）方法内，通过元素名称获得p元素对象，使用hide()方法隐藏p元素，即刚打开页面时，p元素不显示。

  5. 5

    在function（）方法内，定义一个变量j，并赋值为0，同时，通过length属性获得p元素的个数，这两个变量主要用于下面进行循环。

  6. 6

    在function（）方法内，使用setInterval()方法实现每2秒执行一次其内部的function()方法，在function（）方法内，获得p元素对象，使用hide()方法将全部p元素隐藏，然后使用eq()方法循环p元素，每次使用fadeIn()方法按顺序将p元素显示出来，实现让元素轮流循环显示的效果。

  7. 7

    在浏览器打开test.html文件，查看实现的效果。

    END

总结：

  1. 1

    1、创建一个test.html文件。

     

    2、在文件内，使用div标签创建一个模块，在div标签内，使用p标签创建三行文字。

     

    3、在js标签内，获得p元素对象，先将它们全部隐藏，再使用setInterval()方法实现每2秒将p元素按顺序显示出来，实现让元素轮流循环显示的效果。
    END

注意事项

  • setInterval()方法设置的秒数，单位为毫秒。
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。