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 Tools tooltip使用说明
Jul 14 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 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个人网站架设连环讲(二)
2006/10/09 PHP
php 获取可变函数参数的函数
2009/08/26 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
Python线程同步的实现代码
2018/10/03 Python
Python使用gRPC传输协议教程
2018/10/16 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Python魔术方法专题
2020/06/19 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
电子狗项圈:eDog Australia
2019/12/04 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
应用心理学个人求职信范文
2013/12/11 职场文书
给老婆的保证书范文
2014/04/28 职场文书
社区反邪教工作方案
2014/06/16 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书