手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

jQuery如何让元素轮流循环显示

时间:2024-10-14 21:54:36

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

jQuery如何让元素轮流循环显示

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

jQuery如何让元素轮流循环显示

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

jQuery如何让元素轮流循环显示

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

jQuery如何让元素轮流循环显示

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

jQuery如何让元素轮流循环显示

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

jQuery如何让元素轮流循环显示

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

jQuery如何让元素轮流循环显示
jQuery如何让元素轮流循环显示
© 手抄报圈