js实现一个最简单的相册
Posted 安文静
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现一个最简单的相册相关的知识，希望对你有一定的参考价值。
这几天一直在学习和复习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>
以上就是全部的内容，这里面包含了几个基础的点，在上面的内容里都有具体的注释。
以上是关于js实现一个最简单的相册的主要内容，如果未能解决你的问题，请参考以下文章