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 避免闭包引发的问题
Mar 17 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
详解iframe与frame的区别
Jan 13 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
Node与Python 双向通信的实现代码
Jul 16 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面向对象——访问修饰符介绍
2012/11/08 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
如何在PHP中读写文件
2020/09/07 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
python skimage 连通性区域检测方法
2018/06/21 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
python pandas 时间日期的处理实现
2019/07/30 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
详解Python文件修改的两种方式
2019/08/22 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
妇女工作先进事迹
2014/08/17 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
中学教代会开幕词
2016/03/04 职场文书