<!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. Object-C Dealloc

    上一篇为Object-C Init dealloc方法在一个对象从内存中删除时被调用.通常在这个方法里面释放所有对象里的实例变量 -(void)dealloc { [super dealloc]; [ ...

  2. MarkDown 格式生产类型

    -- 不默认换行, 真的结束, 包括格式设定,记得空一行. -- 学习参考地址如下, 讲的不好, 太复杂, 不适合新手. 有好读的更好. ** 但是江湖规矩 还是引用下吧 这是地址(http://wo ...

  3. 安装flash 插件scaleform出现错误：Scaleform Launch Panel.Launcher.handleDataLoaderIOError(): Loading XML Failedscaleform

    经排查发现是Scaleform Launcher.swf报的错 (C:\Users\Administrator\AppData\Local\Adobe\Flash CC\zh_CN\Configura ...

  4. gulp+browserSync+nodemon 实现express 全端自动刷新的实践

    学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究 ...

  5. spring Aop 注解

    个人理解: spring Aop 是什么:面向切面编程,类似于自定义拦截操作,支持拦截之前操作@Before,拦截之后操作@After,拦截环绕操作@Around. 什么情况下使用spring Aop ...

  6. bzoj1014：[JSOI2008]火星人prefix

    思路:插入.修改操作是splay的模型,然后询问的话就可以二分答案,然后再用splay去判,关键就在于怎么去判断. 可以用字符串hash,splay每个节点维护一个hash域,然后就可以定义一个进制去 ...

  7. 【原创】Linux opensource-src-4.3.2.tar.gz的安装。

    下载好opensource-src-4.3.2.tar.gz 安装G++等必备库: sudo apt-get install make gcc g++ sudo apt-get install bui ...

  8. [转]Android应用的自动更新

    软件的自动更新一般都与Splash界面绑定在一起, 由于需要维护的软件界面很复杂, 一个Activity中嵌入ViewPager, 并且逻辑比较复杂, 索性重新写一个Activity, 现在的软件都很 ...

  9. web前端必须掌握的localStorage

    先自我介绍一下,本人男,27岁,单身,web前端程序员一枚,长期潜伏在幕后,只学不教(貔貅么?),其实主要是工作太忙了,每天忙到11点左右,没有时间写东西,洗洗就睡了.最近赶巧,后端那边出技术瓶颈了, ...

  10. PHP实现斐波那契数列非递归方法

    斐波那契数列,又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21.……在数学上,斐波纳契数列以如下被以递归的方法定义:F0=0,F1=1,Fn=F(n-1)+F(n-2)(n ...