JS改变DIV背景图片

本帖最后由 zy370127267 于 2010-05-13 21:10:52 编辑

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <title> New Document </title>
     </head> <body>
    <div id="Image_09" style="width:200px;height:200px;"></div>
    <div id="Image_10">
      <div id="$1001" >
      <input type="button" value="变换背景图片" onClick="changePic();">
      <script type="text/javascript">
    var imgpath=["images/PS02.jpg","images/PS03.jpg","images/PS04.jpg"];
    var index = 0;
    function changePic(){
    index = index < imgpath.length ? index : 0;
    document.getElementById("Image_09").style.background = "url(" + imgpath[index] + ")";
    index++;
    }
      </script>
    </div>
     </body>
    </html>
      

  2.   


    var i=0;
    function changePic(){
    if(i==0){
     document.getElementById("Image_09").style.background-image="images/PS02.jpg";
     i++;
     }
    if(i==1){
     document.getElementById("Image_09").style.background-image="images/PS03.jpg";
     i++;
     }
    if(i==2){
     document.getElementById("Image_09").style.background-image="images/PS04.jpg";
     i=0;
     }
    }
      

  3.   


    <!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=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    #Image_09 {width:100%;height:500px;}</style>
    </head><body>
    <div id="Image_09"></div>
    <div id="Image_10">
      <input type="button" value="变换背景图片" onClick="changePic();">
    </div>
    <script type="text/javascript">
    //<![CDATA[
    var i=0;
    var imgList=["images/PS02.jpg","images/PS03.jpg","images/PS04.jpg"];
    function changePic(){
    var $o=document.getElementById('Image_09');
    if(i>=imgList.length){i=0};
    $o.style.background='url('+imgList[i++]+')';
    }
    //]]>
    </script>
    </body>
    </html>