<!-- 新手刚开始学JS，每天坚持写点东西

坚持下去，希望能有所进步 。  加油~~ -->

<!DOCTYPE html>                                            
<html>
<head>
<title>创建一个图片库</title>
<meta charset="gb2312" />
<link rel="stylesheet" href="css/layout.css">
</head>

<body>

<h1>创建一个图片库</h1>
<ul>
<li><a href="美图/1.JPG" title="这是一只狐狸" onclick="showPic(this); return false;">狐狸</a></li>
<li><a href="美图/2.JPG" title="这是一个苹果" onclick="showPic(this);return false;">苹果</a></li>
<li><a href="美图/3.JPG" title="这是一盘" onclick="showPic(this);return false;">水果</a></li>
<li><a href="美图/4.JPG" title="这是一朵花" onclick="showPic(this);return false;">花朵</a></li>
<li><a href="美图/5.JPG" title="这是杨岢" onclick="showPic(this);return false;">傻逼</a></li>
</ul>
<img id="pic_xianshi" src="" alt="图片将在这里显示" width="600" height="400">
<p id="description">图片将在这里显示</p>

<script src="js/showPic.js">

</script>
</body>

</html>

-------以下是javascript代码-----------

window.onload = function{

　　function showPic(whichpic){

　　　　var source = whichpic.getAttribute("href");　　　　　　　　　　　　  //声明source，从函数中获取href

　　　　var oDis = document.getElementsById("pic_xianshi");　　　　　　　//声明oDis, 它将代表 id为pic_xianshi这个元素

　　　　oDis.setAttribute("src",source);　　　　　　　　　　　　　　　　　　//设置oDis里的属性和值 分别是 "src",  source是“href”所以不用加引号了

　　　　//图片跟随有了，现在继续把文字接上

　　　　var text = whichpic.getAttribute("title");　　　　　　　　　　　　　　//声明 text，从函数中获取title

　　　　var description = document.getElementById("description");　　　　 //声明description, 从文件获取ID为description的元素

　　　　description.firstChild.nodeValue = text ;　　　　　　　　　　　　　   //最终让description中第一个节点的值同步为text的信息

　　}

}

没有进行太多布局和编排。自己再把思路整理一下吧~~

看看跟着能不能实现简单的效果~~  ^_^  加油

JS入门学习，写一个简单的图片库的更多相关文章

  1. 用node.js从零开始去写一个简单的爬虫

    如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...

  2. 使用 js，自己写一个简单的滚动条

    当我们给元素加上 overflow: auto;  的时候,就会出现滚动条,然而浏览的不同,滚动条的样式大不一样,有些甚至非常丑. 于是就想着自己写一个滚动条,大概需要弄清楚一下这几个点: 1.滚动条 ...

  3. 第一个Three.js程序——动手写一个简单的场景

    三维场景基本要素: 步骤: 代码: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  4. js eval函数写一个简单的计算器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 原生js 基于canvas写一个简单的前端 截图工具

    先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  6. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  7. laravel学习：php写一个简单的ioc服务管理容器

    php写一个简单的ioc服务管理容器 原创: 陈晨 CoderStory 2018-01-14 最近学习laravel框架,了解到laravel核心是一个大容器,这个容器负责几乎所有服务组件的实例化以 ...

  8. （原创）如何使用boost.asio写一个简单的通信程序（一）

    boost.asio相信很多人听说过,作为一个跨平台的通信库,它的性能是很出色的,然而它却谈不上好用,里面有很多地方稍不注意就会出错,要正确的用好asio还是需要花一番精力去学习和实践的,本文将通过介 ...

  9. 大前端工程化之写一个简单的webpack插件

    今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...

随机推荐

  1. C#基础-技术还债2-枚举

    定一个枚举如下: using System; using System.Collections.Generic; using System.Linq; using System.Reflection; ...

  2. 在Hibernate框架中详谈一级缓存

    在学习Hibernate的过程中我们肯定会碰上一个名词---缓存,一直都听说缓存机制是Hibernate中的一个难点,它分为好几种,有一级缓存,二级缓存和查询缓存 今天呢,我就跟大家分享分享我所理解的 ...

  3. 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\web\4b49f661\23a749fc\App_Web_default.aspx.cdcab7d2.zii776dc.dll”--“拒绝访问。 ” 解决方法:

    解决方法: 找到C:\Windows\Temp 目录,在其属性->安全->编辑->添加 IIS_IUSERS用户 赋予"完全控制"权限 ...注意:这可能不是最佳 ...

  4. Spring工作原理

    一. IoC(Inversion of control): 控制反转1.IoC:概念:控制权由对象本身转向容器:由容器根据配置文件去创建实例并创建各个实例之间的依赖关系核心:bean工厂:在Sprin ...

  5. Oracle学习总结_day01_day02_表的创建_增删改查_约束

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! 更新: SELECT * FROM (SELECT R ...

  6. linux下的目录结构和内容

    用了这么长时间linux系统,有时候哪个文件应该在哪还是不知道的,所以对于根下的目录结构记下: /bin bin是Binary的缩写.这个目录存放着最经常使用的命令. /boot这里存放的是启动Lin ...

  7. webapi 中的本地登录

    WebApi 身份验证方式 asp.net WebApi 中有三种身份验证方式 个人用户账户.用户可以在网站注册,也可以使用 google, facebook 等外部服务登录. 工作和学校账户.使用活 ...

  8. 原生HTML5 input type=file按钮UI自定义

    原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...

  9. HTTP 协议整理（转）

    HTTP 协议 作为web开发人员,了解一些http协议的知识很有必要.本文简单介绍了HTTP协议的知识,若有错误的地方,望大家斧正. 1.HTTP协议是什么? http协议是一个应用层的协议.规定了 ...

  10. iOS开发UI篇—UITabBarController简单介绍

    iOS开发UI篇—UITabBarController简单介绍 一.简单介绍 UITabBarController和UINavigationController类似,UITabBarControlle ...