手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js相册效果代码(点击创建即可)
js相册效果代码(点击创建即可)
摘要:复制代码代码如下: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>

【js相册效果代码(点击创建即可)】相关文章:

javascript实现日期按月份加减

javascript元素动态创建实现方法

浏览器检测JS代码(兼容目前各大主流浏览器)

js获取变量

javascript搜索框效果实现方法

JS中Eval解析JSON字符串的一个小问题

纯javascript实现四方向文本无缝滚动效果

javascript实现youku的视频代码自适应宽度

javascript相关事件的几个概念

jquery合并表格中相同文本的相邻单元格

精品推荐
分类导航