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>

 

posted @ 2015-05-16 00:09  XCml  阅读(441)  评论(0)    收藏  举报