js相册效果代码(点击创建即可)

复制代码 代码如下:

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

  <title></title>

  <style type="text/css">

  Image

  {

  width:100px;

  height:100px;

  }

  </style>

  <script type="text/javascript">

  function createimgs() {

  var array = ['29b56ef1ecac0a2e23fe73abb8457ed9.jpg',

  '3615bd55e6db2d3eb2a45a8369653f12(1).jpg',

  '3615bd55e6db2d3eb2a45a8369653f12.jpg',

  '837adad119910d349f05149ad4a02ef0.jpg',

  '849b23dac9ceafe6d7e7b94a73b46e82.jpg',

  '91fe451f6e8081fe492c6ae617a50274.jpg',

  '9b1b7be8d60eef1e15257797d779d91b.jpg',

  '9fce9273034aed88fab0bcfef344dae7.jpg',

  'a5f59f9d670a936bf8281090bc2ce7c7.jpg',

  'cda8a8f5b72e165c153fd396db02ab64.jpg',

  'd159717ab855f729066b333d439f630e.jpg',

  'd7ef1897c62640dba44532e6475c49c6.jpg',

  'ef62b67b4dc1bc80daaaf9ebbf90d854.jpg',

  'f6b31d9bca975794bd23fdf71295e1c4.jpg',

  'f856bd37b432eb532098fa170dfbafd4.jpg'

  ];

  //alert(array.length);

  var tablenode = document.createElement('table');

  var tbody = document.createElement('tbody');

  tablenode.setAttribute('width', '600px');

  tablenode.setAttribute('height', '400px');

  tablenode.setAttribute('border', '2px');

  var count = 0;

  for (var i = 0; i < 3; i++) {

  var trnode = document.createElement('tr');

  for (var j = 0; j < 5; j++) {

  var tdnode = document.createElement('td');

  var imgnode = document.createElement('img');

  imgnode.setAttribute('src', 'scenery/' + array[count]);

  // imgnode.setAttribute('width', '100px');

  // imgnode.setAttribute('height', '100px');

  tdnode.appendChild(imgnode);

  trnode.appendChild(tdnode);

  count++;

  }

  tbody.appendChild(trnode);

  }

  tablenode.appendChild(tbody);

  document.body.appendChild(tablenode);

  }

  </script>

  </head>

  <body>

  <input type="button" value="创建相册" onclick="createimgs();" />

  </body>

  </html>