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 相关文章推荐
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
Node.js的特点详解
Feb 03 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
vant时间控件使用方法详解
Dec 24 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分页显示制作详细讲解
2006/12/05 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
flexigrid 参数说明
2010/11/23 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Python使用进程Process模块管理资源
2020/03/05 Python
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
高中军训感言400字
2014/02/24 职场文书
保护环境建议书300字
2014/05/13 职场文书
普通党员整改措施
2014/10/24 职场文书
周一问候语大全
2015/11/10 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript