JavaScript实现背景自动切换小案例

本文实例为大家分享了js实现背景自动切换的具体代码，供大家参考，具体内容如下

功能：

窗口打开背景图自动跳转切换

所有代码：

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现点击切换checkbox背景图片的简单实例

    js实现点击切换checkbox背景图片的简单实例

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景为蓝色表示勾选状态 . HTML源码如下: <div class="check"> <input id="checkbox1" class="checkbox" type="checkbox" checked =

  • JavaScript实现点击按钮切换网页背景色的方法

    JavaScript实现点击按钮切换网页背景色的方法

    本文实例讲述了JavaScript实现点击按钮切换网页背景色的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript用按钮随意变换背景颜色,每点击一下按钮,就可以随机改变一种网页背景颜色.颜色值事先是保存在JS的数组里,你在代码里会发现他们,若不想要某个颜色,就替换掉即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-btn-click-rand-bgcolor-codes/ 具体代码如下: <!DOCTYPE HTML

  • js设置随机切换背景图片的简单实例

    实例如下: <script> var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default.png", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/

  • JS控制按钮自动切换背景颜色(可暂停)

    JS控制按钮自动切换背景颜色,可暂停_我们 .grigg{ position:relative; font-family:Verdana; font-size:16px;color:#ffffff; } y=" "; function colourWrite(){ y=document.bgColor; if (document.layers) {x=document.FM.box.value} if (document.all) {x=document.all.kurt.innerH

  • JS实现点击颜色块切换指定区域背景颜色的方法

    本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现点击颜色块切换指定区域的背景颜色</title> </head> <body> <div align="center"> <table bgcolor=#F8F8F8 border="0" width=&q

  • 纯js实现背景图片切换效果代码

    html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切

  • vuejs 制作背景淡入淡出切换动画的实例

    安装好vuejs之后,在components里添加Background.vue 代码如下 <template> <div class="Background"> <div class="bg"> <transition v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on

  • js实现网页随机切换背景图片的方法

    本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB

  • JavaScript实现背景自动切换小案例

    JavaScript实现背景自动切换小案例

    本文实例为大家分享了js实现背景自动切换的具体代码,供大家参考,具体内容如下 功能: 窗口打开背景图自动跳转切换 所有代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景切换</title> </head> <body> <img src="img/1.jp

  • 浅谈JavaScript_DOM学习篇_图片切换小案例

    浅谈JavaScript_DOM学习篇_图片切换小案例

    今天开始学习DOM操作,下面写一个小案例来巩固下知识点. DOM: document object model (文档对象模型) 根据id获取页面元素 : 如: var xx = document.getElementById("id"); 根据标签获取元素: 如: var xx = document.getElementsByTagName("div"); <!DOCTYPE html> <html lang="en">

  • JavaScript实现音乐自动切换和轮播

    前言:前两天有个同学问我音乐自动切换,并在所有歌曲都播放完成以后实现循环播放的效果.自己折腾了一下做了出来,今天整理桌面的时候突然看见,在拖到回收站的一瞬间想着还是写一篇博客分享一下.实现的方法有很多种,我这里简单的实现. 通过修改video的src(这种应该是最好节省资源的) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

  • ASP、PHP与javascript根据时段自动切换CSS皮肤的代码

    根据时间自动调整站点风格是不错的想法,这种根据时间自动调整站点风格也不是什么新鲜事,记得好久以前也见过类似的文章或方法,只不过当时没有特别注意.下面说一下它们的实现方法,目前网上有这样两种实现方法: 一.采用服务端的代码 ASP版本: <link rel="stylesheet" type="text/css" href=" <% if hour(now)<12 then response.write "morning.css&

  • JavaScript表单焦点自动切换代码

    废话不多说,关键代码如下所示: ---恢复内容开始--- <html> <head> <script> window.onload=function(){ var form=document.getElementsByTagName('form')[0]; var txt=form.elements['txt1']; var txt1=form.elements['txt2']; txt.onkeyup=function(){ if(this.value.length=

  • JavaScript实现自动切换图片代码

    本文给大家分享一段js代码实现自动切换图片的实例代码,代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • JavaScript实现的背景自动变色代码

    JavaScript实现的背景自动变色代码

    本文实例讲述了JavaScript实现的背景自动变色代码.分享给大家供大家参考,具体如下: 这里演示JavaScript实现网页背景自动变色,自己变换颜色,设定时间和颜色值即可,在你设定的颜色值.一定时间内自动切换网页背景颜色. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-cha-bg-color-demo/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tra

  • JavaScript实现电灯开关小案例

    今天学习了JavaScript的一些简单知识,感觉挺有意思,仅仅通过简简单单的几行代码就能模拟出生活中的一些应用场景,Interesting.比如我今天要写的这个模拟电灯开关的小案例. 首先对本案例进行一个分析,过程如下: 1.获取图片对象 2.绑定单击事件 3.每次点击,切换图片 切换规则:如灯是开着的,则切换图片为off状态,如果灯是关着的,则切换图片为on状态,灯的状态用flag标记 代码实现: <!DOCTYPE html> <html lang="en"&g

  • javascript自动切换焦点控制效果完整实例

    本文实例讲述了javascript自动切换焦点控制的方法.分享给大家供大家参考,具体如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"><

随机推荐