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实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
基于JavaScript获取base64图片大小
Oct 18 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调用三种数据库的方法(1)
2006/10/09 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
python代码实现图书管理系统
2020/11/30 Python
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
办公室主任主任岗位责任制
2014/02/11 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
秋天的图画教学反思
2014/05/01 职场文书
销售口号大全
2014/06/11 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
施工员岗位职责范本
2015/04/11 职场文书
建党伟业观后感
2015/06/01 职场文书
周末问候语大全
2015/11/10 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
Python可视化神器pyecharts绘制水球图
2022/07/07 Python