<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片库</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,user-scalable=no">
<style type="text/css">
</style>
</head>
<body>
<h1 style="text-align:center;">图片库的实现</h1>
<div>
<ul id="imgs">
<li><a href="img/img1.png" >一世繁华</a></li>
<li><a href="img/img2.png" >大好河山</a></li>
<li><a href="img/img3.png" >青春.女人</a></li>
</ul>
<img id="placeholder" src="img/img4.png" />
</div>
<script type="text/javascript">
function showPic(whichPic){
var source = whichPic.getAttribute(‘href‘);
var placeholder = document.getElementById(‘placeholder‘);
placeholder.src = source;
}
var imgs = document.getElementById(‘imgs‘).getElementsByTagName(‘a‘);
for ( var i = 0; i < imgs.length; i++ ) {
imgs[i].onclick=function (e){
if ( e && e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;
}
showPic(this);
}
}
</script>
</body>
</html>
这是最基本的图片切换，对于我，唯一的重点就是阻止默认行为的应用
《JavaScript+DOM变成艺术》的摘要（三）---图片库实例
时间： 2024-08-09 18:39:57