javascript学习笔记（第四章图片库--初步了解）

最新推荐文章于 2022-02-19 23:13:51 发布

一头成精的苹果

最新推荐文章于 2022-02-19 23:13:51 发布

阅读量243

点赞数 2

分类专栏： javascript学习笔记文章标签： JS

本文链接：https://blog.csdn.net/dairuyu19971011/article/details/83023616

版权

javascript学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

javascript学习笔记（第四章图片库–初步了解）

通过前三章的学习我们已经对这个新的语言有了一个了解，js的语法基本和C语言一致，我们可以通过调用一些document对象中的函数来对实现一些很简单的基本操作，在一些相关是书籍中博主了解到其实还有很多函数博主现在还没有学习到，之后我们如果用到了我会继续分享给大家。之前我们都是用alert命令提示窗口来实现脚本的操作，在我们真正用到的网页中我们会发现里面的操作是非常多的，尤其是网页中大量的图片，那这些图片又是怎么显示出来的呢？今天我们就一起来学习一下。
在我们使用js创建一个图片库时，我们可以把大量图片的链接集中起来放在图片库的主页中，用户通过点击相应的图片链接就可以获得自己想要浏览的图片。
一、标记
下面我们来创建一个简单的图片库，例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Image Gallery</title>
</head>
<body>
	<h1>Snapshots</h1>
	<ul>
		<li>
			<a href="js图片库/红石头.JPEG" title="木格措景区红石头">红石头</a>
		</li>
		<li>
			<a href="js图片库/康定星空.JPEG" title="康定城市的星空美景">康定星空</a>
		</li>
		<li>
			<a href="js图片库/木格措的杜鹃花.JPEG" title="木格措景区的满山红杜鹃">木格措的杜鹃花</a>
		</li>
		<li>
			<a href="js图片库/木格措的河.JPEG" title="木格措景区的河">木格措的河</a>
		</li>
	</ul>
</body>
</html>

注意将所用的图片集中保存在js图片库文件里，然后将脚本命名为gallery.html，将他们放在同一个目录下。脚本运行结果如下图，我们可以通过鼠标点击相应的图片链接来浏览图片:
在这里插入图片描述

到这里一个简单的图片库就创建好了。

一头成精的苹果

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javascript学习笔记（第四章图片库--初步了解）

javascript学习笔记（第四章图片库–初步了解）通过前三章的学习我们已经对这个新的语言有了一个了解，js的语法基本和C语言一致，我们可以通过调用一些document对象中的函数来对实现一些很简单的基本操作，在一些相关是书籍中博主了解到其实还有很多函数博主现在还没有学习到，之后我们如果用到了我会继续分享给大家。之前我们都是用alert命令提示窗口来实现脚本的操作，在我们真正用到的网页中我们会...
复制链接

扫一扫