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 ...
随机推荐
- 关于Handler与异步消息处理循环的摘抄
Message:消息,其中包含了消息ID,消息处理对象以及处理的数据等,由MessageQueue 统一队列,终由Handler处理. Handler:处理者,负责Message的发送及处理.使用Ha ...
- 2013年10月13日学习：SQL通过命令语句来创建表
优点:操作简单,不容易出错,易于调试 缺点:需要记住命令.命令多了就容易混淆,是吧!但是熟悉了时间长了就OK了! step 1. 新建数据库,命名为Test 点击图形化界面中的新建查询,此时就可以输入 ...
- Solr4.8.1与Tomcat7整合
Solr4.8.1和Tomcat7都可以到官方网站去下载,我这里就不多说了,如下图. 这里我们首先解压Solr-4.8.1.zip,再解压Tomcat,解压后,再在当前文件夹下建2个文件夹,一个用来放 ...
- WKWebView详解
WKWebView是在Apple的WWDC 2014随iOS 8和OS X 10.10出来的,是为了解决UIWebView加载速度慢.占用内存大的问题.使用UIWebView加载网页的时候,我们会发现 ...
- mysql笔记之集群
1.主从配置 #主从都要加入以下配置如下 [mysqld] log-bin=mysql-bin #主从要不一样 server-id=222 #在主上建立一个用户给从的用 GRANT REPLICATI ...
- 漫话JavaScript与异步·第一话——异步：何处惹尘埃
自JavaScript诞生之日起,频繁与异步打交道便是这门语言的使命,并为此衍生出了许多设计和理念.因此,深入理解异步的概念对于前端工程师来说极为重要. 什么是异步? 程序是分"块" ...
- 数据挖掘-关联规则分析[ZZ]
1.什么是关联规则 "尿布与啤酒"的故事大家都有听过,这里就不罗嗦了. 按常规思维,尿布与啤酒风马牛不相及,若不是借助数据挖掘技术对大量交易数据进行挖掘分析,沃尔玛是不可能发现数据 ...
- 暑假集训(1)第八弹 -----简单迷宫（Poj3984)
Description 定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, ...
- 学习基于OpenGL的CAD程序的开发计划（一）
本人目前从事的工作面对的客户中很多来自高端制造业,他们对CAD/CAE/CAM软件的应用比较多.公司现有的软件产品主要是用于渲染展示及交互,但面对诸如CAD方面的应用(比如基于约束的装配.制造工艺的流 ...
- iframe框根据内容自适应高度
1.页面 <iframe name="iframe_userCenter" id="iframe" frameborder=2 width=100% he ...