这几天一直在学习和复习js最基础的东西，因为博主的基础很薄弱，所以正在一点点的学习。。
今天来用js实现一个最简单的相册。请看下图
像不像你妈妈的相册或者是你妈妈的头像。。。。话不多说，上代码
<!DOCTYPE html>
<html>
<head lang="en">
<title>相册</title>
</head>
<body>
<h2>相册</h2>
<div id="imagegallery">
<a href="1.jpg" title="图片A">
<img src="1.jpg" width="100" alt="图片1" />
</a>
<a href="2.jpg" title="图片B">
<img src="2.jpg" width="100" alt="图片2" />
</a>
<a href="3.jpg" title="图片C">
<img src="3.jpg" width="100" alt="图片3" />
</a>
<a href="4.jpg" title="图片D">
<img src="4.jpg" width="100" alt="图片4" />
</a>
</div>
<div style="clear:both;"></div>
<img id="image" src="1.jpg" alt="" width="450px" />
<p id="des">选择一个图片</p>
<script>
//1 获取所有的a标签 对应的元素
var imagegallery = document.getElementById(‘imagegallery‘);
var links = imagegallery.getElementsByTagName(‘a‘);
//2 给所有的a标签注册点击事件
var i = 0; len = links.length;
for (; i < len; i++){
//获取当前元素
var link =links[i];
link.onclick = function(){
//3切换图片和文字
var image = document.getElementById(‘image‘);
var des = document.getElementById(‘des‘);
//设置图片
image.src = this.href;//这块不能用link原因是在执行click事件的时候循环已经执行完了
//设置文字
des.innerText = this.title
//取消默认行为的执行
return false;
}
}
</script>
</body>
</html>
以上就是全部的内容，这里面包含了几个基础的点，在上面的内容里都有具体的注释。
原文地址：https://www.cnblogs.com/awjbky/p/12155502.html
时间： 2024-10-27 13:04:39