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 相关文章推荐
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 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
咖啡与牛奶
2021/03/03 冲泡冲煮
ZF等常用php框架中存在的问题
2008/01/10 PHP
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
php不写闭合标签的好处
2014/03/04 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
javascript 函数使用说明
2010/04/07 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
Python自动登录126邮箱的方法
2015/07/10 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
化学教师自荐信范文
2013/12/28 职场文书
违反交通法规检讨书
2014/09/10 职场文书
政府四风问题整改措施
2014/10/04 职场文书
新员工试用期自我评价
2015/03/10 职场文书
《称赞》教学反思
2016/02/17 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android