使用数组中的值更改图像源

时间:2012-11-09 13:49:43

标签: javascript arrays

<html>
<script type="javascript">
    var building=new Array(10)
    building[1]="images_buildings/abudhabi.jpg"
    building[2]="images_buildings/auckland.jpg"
    building[3]="images_buildings/coffsharbour.jpg"
    building[4]="images_buildings/endinburge.jpg"
    building[5]="images_building/la.jpg"
    building[6]="images_building/london.jpg"
    building[7]="images_building/newyork.jpg"
    building[8]="images_buildings/singapore.jpg"
    building[9]="images_buildings/sydney.jpg"
    building[10]="images_buildings/toronto.jpg"
    var num = 0

    function changepic()
    {
       num=num+1
       if (num==11)
       {num=1}

       document.buildingpic.src=eval("building"+num+".src" )
    }

</script>
</head>

<body>
    <center>
       <img src="images_buildings/abudhabi.jpg" name="buildingpic" width="400"          
height="400" />
       <p><A HREF="JavaScript:changepic()">next</A></p>
    </center>
</p>
</body>
</html>

我试过去研究但是找不到任何帮助我的东西 - 一旦我解决了这个问题,我将添加另一个pic数组和一个信息数组:/但我一次只构建一个 :)

2 个答案:

答案 0 :(得分:4)

在这里,试试吧。

   document.buildingpic.src=building[num]

答案 1 :(得分:1)

使用此功能,您可以向阵列添加更多图像,而无需更改功能的工作方式。

<html>
<script type="text/javascript">
    var building = [];
    building[0] = "images_buildings/abudhabi.jpg";
    building[1] = "images_buildings/auckland.jpg";
    building[2] = "images_buildings/coffsharbour.jpg";
    building[3] = "images_buildings/endinburge.jpg";
    building[4] = "images_building/la.jpg";
    building[5] = "images_building/london.jpg";
    building[6] = "images_building/newyork.jpg";
    building[7] = "images_buildings/singapore.jpg";
    building[8] = "images_buildings/sydney.jpg";
    building[9] = "images_buildings/toronto.jpg";
    var num = 0;

   function changepic()
   {

      if (num>=building.length-1){
         num=0;
      }
      num=num+1;
      document.buildingpic.src=building[num];
   }

  </script>
  </head>

 <body>
 <center>
   <img src="images_buildings/abudhabi.jpg" name="buildingpic" width="400" height="400" />
   <p><A href="javascript:changepic();">next</A></p>
</center>
</body>
</html>