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 ...
随机推荐
- Android TabHost的使用
标签显示界面的主要特点是可以在一个窗口中显示多组标签栏的类容. 在Android系统中,每个标签栏称为一个Tab,而包含多个标签栏的内容就称为TabHost. 通过TabHost的继承结构来看,Tab ...
- ZeroMemory
ZeroMemory: 用0填充一个内存块 void ZeroMemory( [in] PVOID Destination, //内存块开始地址 [in] SIZE_T Length //填充块大小 ...
- 使用RequireJS优化Web应用前端
require.js官网:http://requirejs.org/docs/download.html 一篇不错的文章:http://www.csdn.net/article/2012-09-27/ ...
- thinkphp 自定义标签
关于标签的个人理解是 拼凑php 字符串 通过eval()来进行,返回数据.过程应该是这样的,在模板中加入 定义标签为<mytag:list></mytag>,那么在mvc 中 ...
- js使用正则表达式去空格
写成类的方法格式如下:(str.trim();) <script language="javascript"> String.prototype.trim=functi ...
- Map集合中的一些具体方法的体现
package com.java.b.map.www; import java.util.Collection;import java.util.HashMap;import java.util.It ...
- C++学习指南
转载于stackoverflow:http://stackoverflow.com/questions/388242/the-definitive-c-book-guide-and-list 感谢Ge ...
- Headfirst设计模式的C++实现——简单工厂模式(Simple Factory)之二
为了引出后续的工厂方法,把在简单工厂模式的基础上增加了新功能——加盟店 简而言之就是把原来的单一简单工厂(能生产cheese和greek两种pizza)细分成了纽约地区的和芝加哥地区的(每种地区都能生 ...
- jQuery DataTables 插件使用笔记
初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type=&q ...
- linux根目录详解
ubuntu 文件说明:http://tech.ccidnet.com/art/302/20080118/1347213_1.html/ 根目录 | |-boot/ 启动文件.所有与系统启动有关的 ...