养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

用js实现在页面上循环显示图像

时间:2024-09-24 11:23:07

在浏览网页时经常见到不断变换的广告标题或者滑动显示的图像,这些效果是如何实现的呢?接下来进行简要介绍。

工具/原料

电脑

记事本

方法/步骤

1、window对象的onLoad方法,页面加载完成时就会触发该事件,以运行代码,实现标题变换。

用js实现在页面上循环显示图像

2、setInterval函数:它能够重复运酚祯馄嫱行js,每次运行有一定的间隔。每隔2000毫秒运行一次cycle函数。

用js实现在页面上循环显示图像

3、整段代码如下所示:

用js实现在页面上循环显示图像

4、用的是搜狗浏览器,点击工具|开发者工具,即打开调试工具

用js实现在页面上循环显示图像

5、找到代码第15行,设置一个断点水貔藻疽,则程序每次运行到这里都会暂停。在右侧的breakpoints里面可以看到刚才设置的断点。

用js实现在页面上循环显示图像

6、程序运行到断点会会暂停,给出提示,如图:可人工让它继续运行。

用js实现在页面上循环显示图像

7、点击右侧Watch右揲褐逞孽侧的+号,可以输入变量,以查看变量值的变化过程。此处,输入counter和getElementById("banner").src

用js实现在页面上循环显示图像

8、运行过程中可以看到的两个表达式的值如下:

用js实现在页面上循环显示图像

© 一点知识