你的位置:首页 > Java教程

[Java教程]JS入门学习,写一个简单的图片库


<!-- 新手刚开始学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的信息

  }

}

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

 

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