JavaScript实现背景自动切换小案例


Posted in Javascript onSeptember 27, 2019

本文实例为大家分享了js实现背景自动切换的具体代码,供大家参考,具体内容如下

JavaScript实现背景自动切换小案例

功能:

窗口打开背景图自动跳转切换

所有代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>背景切换</title>
</head>
<body>
<img src="img/1.jpg" width="500" id="imgId"/>
</body>
</html>
<script type="text/javascript">
 window.onload = function () {

 setInterval(step, 1000);
 }
 var num = 1;
 function step() {
 if (num < 5) {
  num++;
 } else {
  num = 1;
 }
 var dom = document.getElementById("imgId");
 //更改它images的src属性
 dom.src = 'img/' + num + '.jpg';
 }

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
offsetParent 算法分析
Apr 05 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
vue实现在线翻译功能
Sep 27 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
vue监听用户输入和点击功能
Sep 27 #Javascript
vue实现文字加密功能
Sep 27 #Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 #Javascript
vue实现购物车小案例
Sep 27 #Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 #Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 #Javascript
vue实现移动端省市区选择
Sep 27 #Javascript
You might like
php计算整个目录大小的方法
2015/06/01 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
php集成开发环境详解
2019/09/24 PHP
juqery 学习之四 筛选查找
2010/11/30 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python使用KNN算法手写体识别
2018/02/01 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
python Tkinter版学生管理系统
2019/02/20 Python
pymysql 开启调试模式的实现
2019/09/24 Python
python argparser的具体使用
2019/11/10 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
检查接待方案
2014/02/27 职场文书
学校教研活动总结
2014/07/02 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
工作简报怎么写
2015/07/21 职场文书