<!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>