动态显示图片 Js + html

最新推荐文章于 2022-11-30 15:13:30 发布

lzid2008

最新推荐文章于 2022-11-30 15:13:30 发布

阅读量9.4k

点赞数

分类专栏： Javascript 文章标签： javascript html border function table 文档

本文链接：https://blog.csdn.net/lzid2008/article/details/1189827

版权

Javascript 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

//showImgsJs.js

// JavaScript Document
var htmlShow = ""
var imgName ="";

var numBegin,numEnd;
var colNum = 7; //一行显示的图片数量
var theCount = 12;//总共有多少图片

//文件夹里图片的名称集合
var theImgsName = "0Zero|1First|2Second|3Third|blue|green|color|7|8|9|10|11|12|13|14|15|";

var theImgs = theImgsName.split("|");

var beginHtml = "<tr>";
beginHtml += "<td colspan='" + colNum +"' align='center'>pictures<hr></td>";
beginHtml += "</tr>";
//alert(beginHtml);
document.write(beginHtml);

for(var row=0; row<=3; row++)
{
  htmlShow +="<tr>";
   numBegin = row * colNum + 1;
   numEnd = (row+1) * colNum + 1 ;
  for(var col=numBegin; col<numEnd; col++)
  {
   imgName = "Img/" + theImgs[col] + ".jpg"
   htmlShow += "<td align='center'>";

   var boolShow;
   if(col <=theCount)
    boolShow = "style='visibility:visible;'";
   else
    boolShow = "style='visibility:hidden;'";

   htmlShow += "<img src= '" + imgName + "' width='90' height='120' "+ boolShow +">";
   htmlShow += "<br>" + "<a href='#' onClick = 'showTheInf()'"+ boolShow +" >"+ imgName + "</a><br> ";
   htmlShow += "</td>";
  }
  htmlShow +="</tr>";
}
document.write(htmlShow);

//=======================================End

打开窗口

<a href="#" onClick="showResume(12)">theName12</a>