js基础图片库_js2008门窗图集-CSDN博客

本文链接：https://blog.csdn.net/q4651212/article/details/38493531

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>我的图片库</title>
  <style>
	#gallery{
	list-style:none;
	}
#gallery li{
	display:inline;
	}
#gallery li a img{
	width:10%;
	}
h1{
	margin-left:35px;
	}
#placeholder,#imgText{
	margin-left:38px;
	}
  </style>
 </head>
 <body>
	<h1>我的图片库</h1>
	<ul id="gallery">
		<li><a href="http://a.niupic.com/images/2014/08/11/53e86de596293.jpg" title="这是第一张图片"><img src="http://a.niupic.com/images/2014/08/11/53e86de596293.jpg"></a></li>
		<li><a href="http://a.niupic.com/images/2014/08/11/53e86de9b1406.jpg" title="这是第二张图片"><img src="http://a.niupic.com/images/2014/08/11/53e86de9b1406.jpg"></a></li>
		<li><a href="http://a.niupic.com/images/2014/08/11/53e86dee0c934.jpg" title="这是第三张图片"><img src="http://a.niupic.com/images/2014/08/11/53e86dee0c934.jpg"></a></li>
		<li><a href="http://a.niupic.com/images/2014/08/11/53e86df3853fb.jpg" title="这是第四张图片"><img src="http://a.niupic.com/images/2014/08/11/53e86df3853fb.jpg"></a></li>
	</ul>
	<img id="placeholder" src="http://a.niupic.com/images/2014/08/11/53e86df54242f.gif">
	<p id="imgText">欢迎来到我的图片库</p>
	<script>
			


function parper(){
	var gallery = document.getElementById("gallery");
	var link = gallery.getElementsByTagName("a");
	for(var i=0; i<link.length; i++){
		link[i].onclick = function(){
			return !showPic(this);	
		}
	}
}






function showPic(which){
	if(!document.getElementById) return false;
	var placeholder = document.getElementById("placeholder");
	var whicher = which.getAttribute("href");
	placeholder.setAttribute("src",whicher);


	var imgText = document.getElementById("imgText");
	var text = which.getAttribute("title");
	imgText.childNodes[0].nodeValue = text;
	return true;
	
}
addLoadEvent(parper);


function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof window.onload != "function"){
		window.onload =func;
	}else{
		oldonload();
		func();
	}
}
	</script>
</body>
</html>

本人小白，这是第一次上传代码。感谢@pingfan 提供上传图片的网站。这个小代码源自 js_dom编程艺术。