Javascript自动换图片
<!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自动换图片的更多相关文章
- 最新javascript自动按比例显示图片，按比例压缩图片显示
最新javascript自动按比例显示图片,按比例压缩图片显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- 用javascript协助导入图片
用javascript协助导入图片 需求 先说说需求.春节回家见爸妈,老爸迷上了摄影.他把平时的照片都上传到了 成都图片网, 这个成都图片网专门有一个 "快拍成都" 的版块,用于大 ...
- 带左右箭头切换的自动滚动图片JS特效
效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- JavaScript修改Canvas图片
用JavaScript修改Canvas图片的分辨率(DPI) 应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(D ...
- JavaScript自动生成博文目录导航/TOP按钮
博客园页面添加返回顶部TOP按钮 进入网页管理->设置 在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式 此处可以将背景色background-co ...
- JavaScript自动生成博文目录导航
转载于:JavaScript自动生成博文目录导航 我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到 具体的内容 ...
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- 防止 JavaScript 自动插入分号
JavaScript语言有一个机制:在解析时,能够在一句话后面自动插入一个分号,用来修改语句末尾遗漏的分号分隔符. 然而,由于这个自动插入的分号与JavaScript语言的另一个机制发生了冲突,即所有 ...
- IOS开发UI篇之自动滚动图片
我们在做项目是有时候会遇到设置自动滚动图片,所以我自己也遇到过两次.觉得他是一个挺有意思东西,所以做了下总结 DEMO: .h #import <UIKit/UIKit.h> @inter ...
随机推荐
- sublime text3输入中文的问题.
1.新建sublime_imfix.c文件 里面输入: /* * sublime-imfix.c * Use LD_PRELOAD to interpose some function to fix ...
- Windows 7中，用Visual Studio开发WPF应用程序，实现从Windows Explorer中拖拽文件到应用程序，始终显示“无法拖放”符号问题解决方案
Are you running your application or Visual Studio that hosts the app under administrative privilege? ...
- windows下能读写linux分区的软件 转
1. ext2ifs 这个工具与explore2fs都是John Newbigin使用Delphi写的,explore2fs Copyright (C) 2000,Ext2IFS v0.3 Copyr ...
- iOS－开发日志－UIButton
UIButton属性 1.UIButton状态: UIControlStateNormal // 正常状态 UIControlStateHighlighted // 高 ...
- jquery动态添加/删除 tr/td
<head runat="server"> <title></title> <!--easyui --> <link rel= ...
- jQuery 源码分析2: jQuery.fn.init
//jQuery.fn.intit 中使用到的外部变量: // 判断是否为HTML标签或#id rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w ...
- Mac apache配置问题解决
AH00526: Syntax error on line 20 of /private/etc/apache2/extra/httpd-mpm.conf: Invalid command 'Lock ...
- 相看系统中用户的信息 passwd, shadow
用用户的信息都保存在 etc/passwd 和 etc/shadow 文件中,其中 shadow 保存的是经过加密码的 能过 cat etc/passwd 和 cat etc/shadow 来查看相关 ...
- svn命令操作
非超级用户:sudo 命令 svn info 查看svn地址 svn co 地址 检出仓库
- 在Windows下不使用密码远程登陆Linux
在登陆Linux进行管理的时候我们通常会使用用户名和密码进行登陆,这样一来是比较麻烦,二来是不安全,为了解决这个问题,我们可以使用公私钥 (public keys和private keys)进行认证. ...