DIV图片自动变换与点击按钮变化图片效果

我有这么一段代码，是关于DIV背景图片变换的
我搞了一个图片自动循环变换，另外加上了两个按钮，当点击按钮时，图片也会变换
但我把这两个搞在一起时，点击按钮变换图片不起作用了，只有图片自动变换
想请教大虾们帮我改改，改到既能是图片自动变换，也能在点击按钮时使图片变化
代码如下：
<script type="text/javascript" language="javascript">
    var pics = ["images/PS03.jpg", "images/PS04.jpg", "images/PS05.jpg", "images/PS06.jpg", "images/PS07.jpg", "images/PS08.jpg", "images/PS09.jpg", "images/PS10.jpg", "images/PS11.jpg", "images/PS12.jpg"];
    var picIndex = 0;
    function changePic_01() {    
        document.getElementById("Image_09").style.background= "url("+pics[picIndex]+")";
        picIndex = (picIndex + 1) % pics.length;
    } function inspect(){
var username = document.myForm.userName.value;
var password = document.myForm.passWord.value;
if(username.length < 1 )
{
alert("用户名非法，请检查!");
return false;
}
if(password.length < 1)
{
alert("密码非法，请检查!");
return false;
}
}
</script>
<script type="text/javascript"> 
<!--
var bannerAD=new Array(); 
var bannerADlink=new Array(); 
var adNum=0;  bannerAD[0]="images/PS03.jpg"; 
bannerADlink[0]="index.htm" bannerAD[1]="images/PS04.jpg"; 
bannerADlink[1]="index.htm" bannerAD[2]="images/PS05.jpg"; 
bannerADlink[2]="index.htm" bannerAD[3]="images/PS06.jpg"; 
bannerADlink[3]="index.htm" bannerAD[4]="images/PS07.jpg"; 
bannerADlink[4]="index.htm" bannerAD[5]="images/PS08.jpg"; 
bannerADlink[5]="index.htm"
/*图片可以增加*/
var preloadedimages=new Array(); 
for (i=1;i<bannerAD.length;i++){ 
preloadedimages[i]=new Image(); 
preloadedimages[i].src=bannerAD[i]; 
}  function setTransition(){ 
if (document.all){ 
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23); 
bannerADrotator.filters.revealTrans.apply(); 
} 
}  function playTransition(){ 
if (document.all) 
bannerADrotator.filters.revealTrans.play() 
}  function nextAd(){ 
if(adNum<bannerAD.length-1)adNum++ ; 
else adNum=0; 
setTransition(); 
document.images.bannerADrotator.src=bannerAD[adNum]; 
playTransition(); 
theTimer=setTimeout("nextAd()", 6000); 
}  function jump2url(){ 
jumpUrl=bannerADlink[adNum]; 
jumpTarget='_blank'; 
if (jumpUrl != ''){ 
if (jumpTarget != '')window.open(jumpUrl,jumpTarget); 
else location.href=jumpUrl; 
} 
}  function displayStatusMsg() { 
status=bannerADlink[adNum]; 
document.returnValue = true; 
} //--> 
</script>
<div id="Image_09">
    <a onmouseover="displayStatusMsg();return document.returnValue" href="javascript:jump2url()"><img src="images/Image_09.jpg" name="bannerADrotator" width="492px" height="281px" border="0" id="bannerADrotator" style="FILTER: revealTrans(duration=2,transition=40)" />
    </a> 
    <script type="text/javascript">nextAd()</script>
</div>
<div id="Image_11">
    <div id="div1101">
        记忆
    </div>
    <div id="div1102" >
        <input type="image" src="images/PS01.jpg" alt="点此换图" onClick="changePic_01();">
    </div>
    <div id="div1103" >
        <input type="image" src="images/PS01.jpg" alt="点此换图" onClick="changePic_01();">
    </div>
</div>

解决方案 »

  1.   

    自动随机更换图片            function rdmShowPic(){
                    var picCount = new Array();
    for(i=1;i<=6;i++){
    picCount.push(i);
    }
                    var num = picCount[Math.floor(Math.random() * picCount.length)];
                    document.getElementById("img").innerHTML = "<img src='../images/" + num + ".jpg' />"+num;
                }
    window.onload=function(){
    t=setInterval('rdmShowPic()',2000);
    //clearInterval(t);
    }
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style type="text/css">
    div {
        display:none;
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        var count = 0;
    var variable = null;
    var agvPictures = ["bigCry","cry","ku","smile"];
        function move() {
      if(variable == null) {
         variable = count;
      } else {
         document.getElementById(agvPictures[variable]).style.display = "none";
      }
      document.getElementById(agvPictures[count]).style.display = "block";
          variable = count;
          count++;
      if(count > agvPictures.length-1) {
         count = 0;
      }
      setTimeout("move()",1000); 
    }

    //-->
    </SCRIPT>
    </HEAD>
    <BODY onLoad="move()">
    <div id="bigCry"><img src="images/bigCry.gif"></div>
    <div id="cry"><img src="images/cry.gif"></div>
    <div id="ku"><img src="images/ku.gif"></div>
    <div id="smile"><img src="images/smile.jpg"></div>
    </BODY>
    </HTML>
    自动换图片