标签：事件 赋值 style length 驱动程序 type lis list nts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>美女相册</title>
<style type="text/css">
ul li{
float: left;
list-style: none;
margin: 5px;
border-radius: 25px;
border-color: black;
border: 1px solid;
}
a{
text-decoration: none;
color: yellow;
}
#image{
margin-left:200px;
background-color: gray;
}
p{
margin-left: 600px;
}
button{
margin-top: 5px;
}
</style>
</head>
<body>
<h2>
美女画廊
</h2>
<a href="#" >注册</a>
<ul id=imagephoto>
<li>
<a href="imgxc/1.jpg" title="照片1">
<img src="imgxc/1.jpg" width="200" alt="美女1">
</a>
</li>
<li>
<a href="imgxc/2.jpg" title="照片2">
<img src="imgxc/2.jpg" width="200px" alt="美女2">
</a>
</li>
<li>
<a href="imgxc/3.jpg" title="照片3">
<img src="imgxc/3.jpg" width="200px" alt="美女3">
</a>
</li>
<li>
<a href="imgxc/4.jpg" title="照片4">
<img src="imgxc/4.jpg" width="200px" alt美女4">
</a>
</li>
<li>
<a href="imgxc/5.jpg" title="照片5">
<img src="imgxc/5.jpg" width="200px" alt="美女5">
</a>
</li>
<li>
<a href="imgxc/6.jpg" title="照片6">
<img src="imgxc/6.jpg" width="200px" alt="美女6">
</a>
</li>
</ul>
<button onclick="qiehuan">下一张</button>
<div style="clear:both"></div>
<img id="image" src="" width="900px" height="300px" border="1px black soild" >
<p id="ied"><a href="#">选择一张图片</a> </p>
<script type="text/javascript">
//需求：点击小图片，改变下面大图片的src值。赋值为a链接的href属性值。
//让p标签的innerHtml属性值改变为a标签的title属性值
//步骤
//1.获取事件源和相关元素
//2.绑定事件源
//3.写事件驱动程序
var ul=document.getElementById("imagephoto");
var aArr=ul.getElementsByTagName("a");
var image=document.getElementById("image");
for(var i=0;i<aArr.length;i++){
aArr[i].onclick=function(){
image.src=this.href;
ied.innerHTML=this.title;
return false;
}
}
function qiehuan(){
for(j=0;j<aArr.length;j++){
image.src= "imgxc/"+j+".jpg";
}
}
</script>
</body>
</html>
标签：事件 赋值 style length 驱动程序 type lis list nts
原文地址：https://www.cnblogs.com/qinxuhui/p/9595253.html
