js相册效果代码(点击创建即可)_Javascript教程-查字典教程网
js相册效果代码(点击创建即可)
js相册效果代码(点击创建即可)
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:Image{width:100px;height:100px;}functioncreateimgs(){vararray...

复制代码 代码如下:

<!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="创建相册" />

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类