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 ...
随机推荐
- MathType支持64位 WIN 7Office 2013（完美解决）（转载）
经过几次尝试解决了,方法如下: 1. 安装MathType 6.8 (别的版本不知是否适用,本人安装的是该版本) 2. 将以下两个文件拷贝出来 C:\Program Files (x86)\MathT ...
- apparmor介绍
AppArmor AppArmor 类似于selinux ,主要的作用是设置某个可执行程序的访问控制权限,主要区别就在于apparmor是以路径(path)为基础,而selinux以i节点(inode ...
- 搭建showslow:前端性能跑分及优化工具
综述:showslow是一个开源的工具,集成并通过Yahoo yslow.google page speed.dynaTrace AJAX等工具监测网站各项性能指标,然后通过图表和排名展示出来. 1. ...
- 关于使用cocoaPods，import导入时第三方库头文件没有提示问题的解决办法
估计有很多朋友在使用Xcode在项目中导入第三方库时,使用的是cocoaPods,但是在项目中使用此第三方库导入头文件时,输入#import后,并不会联想第三方库头文件(XXXX.h),需要我们手动输 ...
- 近期专案PM相关收获
1, 厚黑学讲的有道理, 坏人? 为什么占便宜., 好人为什么当不了坏人是有一定道理的. -- 作为PM,能力大小居然都能胜任,从这一点上对组员不负责,如下种种都算有则改之无则加勉. ...
- C语言——打印魔方阵（每一行，每一列，对角线之和相等）
<一>魔方阵说明: 魔方阵是一个N*N的矩阵: 该矩阵每一行,每一列,对角线之和都相等: <二>魔方阵示例: 三阶魔方阵: 8 1 6 3 5 7 4 9 ...
- 2016.08.06计算几何总结测试day1
T1 bzoj1132[POI2008]TRO 还是太弱了....测试时看到这题直接懵逼,极角排序什么的根本想不起来,只会n^3暴力怎么破......不过竟然有84.....QAQ 正解是n^2log ...
- Vivado Launching SDK "Importing Hardware Specification" error的解决方法
解决方法是通过参考http://forum.digilentinc.com/topic/611-vivado-launching-sdk-importing-hardware-specificatio ...
- 排序算法——QuickSort、MergeSort、HeapSort（C++实现）
快速排序QuickSort template <class Item> void quickSort (Item a[], int l, int r) { if (r<=l) ret ...
- wampserver下升级php7
1.下载php7 http://windows.php.net/download#php-7.0 选择 VC14 x86 Thread Safe 64位选X64 32位选X86 2.下载VC14 ...