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 指导方针
Apr 05 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
Node.js学习之查询字符串解析querystring详解
Sep 28 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
详解如何在vue-cli中使用vuex
Aug 07 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 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代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
HTML的select控件美化
2017/03/27 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
python爬取网易云音乐评论
2018/11/16 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
机器学习实战之knn算法pandas
2019/06/22 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
七年级生物教学反思
2016/02/20 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
JS实现数组去重的11种方法总结
2022/04/04 Javascript