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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#tuijian {

    position: absolute;

    left: 0px;

    top: 0px;

    width: 100%;

    height: 1000px;

    z-index: 1;

    background-repeat:no-repeat;

}

#p1 {

    position: absolute;

    float:left;

    margin:300px 0px 0px 0px;

    width: 48px;

    height: 56px;

    z-index: 2;

    background-image:url(image/fact2.png)

}

#p2 {

    float:right;

    margin:300px 0px 0px 0px;

    width: 48px;

    height: 56px;

    z-index: 3;

    background-image:url(image/fact4.png)

}

</style>

</head>

<body>

<div id="tuijian" style="background-image:url(image/header.jpg)">

    <div id="p1" class="pages" onclick="dodo(-1)"></div>

    <div id="p2" class="pages" onclick="dodo(1)"></div>

</div>

</body>

</html>

<script language="javascript">

var jpg=new Array();

jpg[0]="url(image/header.jpg)";

jpg[1]="url(image/ae.jpg)";

jpg[2]="url(image/ad.jpg)";

var tjimg=document.getElementById("tuijian");  //定义一个变量tjimg来接收id=tuijian的div

var xb=0;

var n=0;

function change()

{

    xb++;

    if(xb==jpg.length)

    {

        xb=0;

        }

    tjimg.style.backgroundImage=jpg[xb];

    if(n==0)

    {

    window.setTimeout("change()",1000);  //每隔1秒调用一下change函数

        }

}

//下面的是手动换图片

function dodo(m)

{

    n=1;

    xb=xb+m;

    if(xb<0)

    {

        xb=jpg.length-1; //左边到头了,重新从xb=jpg.length-1开始

        }

    else if(xb>=jpg.length)

    {

    xb=0;  //右边到头了,重新从xb=0开始

        }

    tjimg.style.backgroundImage=jpg[xb];  //改变背景图片

    }

window.setTimeout(change(),1000)  //每隔1秒调用一下change()函数

</script>

Javascript自动换图片的更多相关文章

  1. 最新javascript自动按比例显示图片，按比例压缩图片显示

    最新javascript自动按比例显示图片,按比例压缩图片显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  2. 用javascript协助导入图片

    用javascript协助导入图片 需求 先说说需求.春节回家见爸妈,老爸迷上了摄影.他把平时的照片都上传到了 成都图片网, 这个成都图片网专门有一个 "快拍成都" 的版块,用于大 ...

  3. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. JavaScript修改Canvas图片

    用JavaScript修改Canvas图片的分辨率(DPI)   应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(D ...

  5. JavaScript自动生成博文目录导航/TOP按钮

    博客园页面添加返回顶部TOP按钮 进入网页管理->设置 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 此处可以将背景色background-co ...

  6. JavaScript自动生成博文目录导航

    转载于:JavaScript自动生成博文目录导航 我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到 具体的内容 ...

  7. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  8. 防止 JavaScript 自动插入分号

    JavaScript语言有一个机制:在解析时,能够在一句话后面自动插入一个分号,用来修改语句末尾遗漏的分号分隔符. 然而,由于这个自动插入的分号与JavaScript语言的另一个机制发生了冲突,即所有 ...

  9. IOS开发UI篇之自动滚动图片

    我们在做项目是有时候会遇到设置自动滚动图片,所以我自己也遇到过两次.觉得他是一个挺有意思东西,所以做了下总结 DEMO: .h #import <UIKit/UIKit.h> @inter ...

随机推荐

  1. 几种工具反编译被编译好的DLL文件

    我们平时在工作中经常会遇到一些已经被编译后的DLL,而且更加麻烦是没有源代码可以进行修改,只能针对这个DLL的文件进行修改才能得到我们想要的结果:本文将通过一个实例来演示如果完成一个简单的修改;我们将 ...

  2. WildFly 9.0.2 启用 SSL

    一.最近做个项目是需要在WildFly中启用https,但是由于WildFly的中文文档比较少所以google了一下,先是通过JBOSS的官方文档了解了一下,但是官方文档这块的配置介绍有些不全面.所以 ...

  3. job还是job

    declare jobno binary_integer;rm_days number;rm_hour number;  --传入的hourmy_hour number;    --取出当前时间的ho ...

  4. java新手笔记5 类

    1.进制转换 /* 企业发放的奖金根据利润提成. 利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时, 低于10万元的部分按10%提成,高于10万元的部分,可提成7.5 ...

  5. 下载APP 2个二维码合并到一个二维码

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. 几个 JavaScript 奇技淫巧

    #1使用双等号给布尔变量赋值,很容易联想到 var a = b || 123; 的写法 var a = b == 123;#2快速转换为布尔值 !!a#3防止页面被 iframe 调用 if(top ...

  7. oracle安装，配置，启动

    因为主要不是讲oracle这些,所以就略写. 注意安装的时候:确保以前安装过的卸载干净了.安装的路径不能包含中文.安装的时候需要创建两层数据库.因为在选择的安装目录的平行目录会产生文件. 确认卸载完可 ...

  8. python 函数1

    一.背景 在学习函数之前,一直遵循:面向过程编程,即:根据业务逻辑从上到下实现功能,其往往用一长段代码来实现指定功能,开发过程中最常见的操作就是粘贴复制,也就是将之前实现的代码块复制到现需功能处,如下 ...

  9. KeepAlive详解

    KeepAlive既熟悉又陌生,踩过坑的同学都知道痛.一线运维工程师踩坑之后对于KeepAlive的总结,你不应该错过! 最近工作中遇到一个问题,想把它记录下来,场景是这样的: 从上图可以看出,用户通 ...

  10. SQL SERVER 2008 使用TDE加密和解密

    SQL SERVER 2008 加密和解密,这样的文件在互联网上不胜枚举,本文的寓意还是一样,一为记录,二可以为开发者提供在实现过程中的注意事项. TDE: Transparent data encr ...