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 ...
随机推荐
- Candence下对“跨页连接器（off-page connector）”进行批量重命名的方法
parts.ports.alias等等均可以在“属性编辑器(Property Editor)”中进行查看编辑,并通过复制到Excel等表格软件来进行批量修改.之后再粘贴回去的方法进行批量编辑.但是“跨 ...
- 小技巧之指定refer
在当前页面A的控制台输入window.location.href='要跳去的页面B',B页面的refer即为A页面.
- autorelease 的基本使用
5-autorelease 的基本使用 0,引入 Person *p = [Persom new];[p release]; [p run]; [p run]; // 希望不立即释放,待 run执行完 ...
- js hashMap
/** * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, ...
- HDU 5351 MZL's Border (规律，大数)
[HDU 5351 MZL's Border]题意 定义字符串$f_1=b,f_2=a,f_i=f_{i-1}f_{i-2}$. 对$f_n$的长度为$m$的前缀$s$, 求最大的$k$满足$s[1] ...
- CentOS6.6源码编译升级GCC至4.8.2
升级前提 源码编译需要至少要有一个可用的gcc编译器. 可以用过yum自动安装或者手动下载rpm包安装. 通过yum可以看到至少需要下面这些安装包,所以可以到许多rpm package站点中搜索下载相 ...
- PHP接口(interface)和抽象类(abstract)
interface 定义了一个接口类,它里面的方法其子类必须实现.接口是类的一个模板,其子类必须实现接口中定义的所有方法. interface User{ function getHeight ...
- css小心德
内部块最好用百分比,微调时方便
- 1.MVC框架开发（初识MVC）
1.约定大于配置 Content:存放静态文件(样式表.静态图片等) Controllers:存放控制器类 Models:存放数据模型文件 Scripts:存放脚本文件 Views:存放视图文件,里面 ...
- C#网页自动登录和提交POST信息的多种方法(转)
网页自动登录和提交POST信息的核心就是分析网页的源代码(HTML),在C#中,可以用来提取网页HTML的组件比较多,常用的用WebBrowser.WebClient.HttpWebRequest这三 ...