JavaScript_03|JavaScript_03 案例研究-图片库
假设我们要做一个图片库的功能,如果我们将所有的图片,都显示到一个网页中,显然在页面加载的时候速度会很慢。而另一种解决方法是,点击一个链接,打开我们要查看的图片。通常我们会这么写:
图片库 - 锐客网
-
小草
-
猫咪
-
爱情
这样写,我们可以在当前网页上通过点击小草、猫咪、爱情链接,会在新的窗口中显示对应的图片。如果我们需要切换查看其他的图片时,则需要借助浏览器的回退按钮。这很不方便,那有没有更方便的方法呢,我们想,如果它能在当前这个网页上显示我们想看到的图片就好了。我们给页面做一些优化。在程序末尾来增加一个显示图片的地方。
图片库 - 锐客网
-
小草
-
猫咪
-
爱情
文章图片
到现在,我们增加了一个id="zwf"的图片,这个图片位于列表项的底部。用来显示我们要显示的图片,当前照片是选取的一个占位符的图片。考虑一下,如何才能让它显示不同的图片呢?可以看到,其中src="https://www.it610.com/article/img/zwf.jpg"。这句是来表示具体显示的图片的,那我们说,如果这个是一个传递过来的其他的图片路径,就可以显示其他的图片了,不是么?我们要做的是,当点击小草这个链接时,底下的占位符图片换成小草的图片。点击猫咪链接时,显示猫咪的链接。那要做的就是点击某一个链接,把这个链接的href属性的值,传递给id="zwf"的src的值,这样,就可以实现我们想要的功能了。
我们来写一个函数。假设定义函数名为:showPic。传递过来的参数定为一个链接的对象pic。函数结构如下:
function showPic(pic){}
现在开始边思考边编写脚本,首先我们需要获取传递过来的链接对象的href的值。通过我们之前所学的知识,可以编写代码
var picHref = https://www.it610.com/article/pic.getAttribute("href");
然后,我们需要获取id="zwf"的img的节点对象
var img = document.getElementById("zwf");
当我们有了img节点对象,有了链接之后,就需要设置这个节点对象的src属性了。
img.setAttribute("src",picHref);
到这里,我们函数脚本就编写完了。如下:
function showPic(pic){
var picHref = https://www.it610.com/article/pic.getAttribute("href");
//获取传递过来节点的图片地址
var img = document.getElementById("zwf");
//获取id为zwf的图片
img.setAttribute("src",picHref);
//设置该图片的src为获取到的图片地址
}
然后我们将脚本放到外部的js文件中,假设是example.js文件,在html中导入。