childNodes property: 
The childNodes property is a way of getting information about the children of any element in a 
document's node tree. It returns an array containing all the children of an element node :
    element.childNodes; 
 
Lets say you wanted to get all the children of the body element.
    var body_element = document.getElementsByTagName("body")[0];
To access the children of the body element, you just need to use :
    body_element.childNodes; 
you may write a function to find out how many elements the body element contains :
  1.  function countBodyChildren() {
  2.        var body_element = document.getElementsByTagName("body")[0] ;
  3.        alert( body_element.childNodes.length );
  4.  }
If you want this function to be excuted when the page loads, you can use the onload event handler
to do this. 
        window.onload = countBodyChildren ;
When the document loads, the countBodyChildren function will be invoked.
 
 
nodeType property :
This will tell us exactly what kind of node we're dealing with. 
The nodeType property is called with the following syntax : 
node.nodeType
instead of returning a string like "element" or "attribute", it returns a number.
There are 12 possible values for nodeType, but only 3 of them are going to be of much practical use:
  • Element nodes have a nodeType value of 1
  • Attribute nodes have a nodeType value of 2
  • Text nodes have a nodeType value of 3
 
 
nodeValue property :
If you want to change the value of a text node, there is a DOM property called nodeValue that can be 
used to get (and set) the value of a node :
node.nodeValue
 
firstChild and lastChild property :
node.firstChild  ==  node.childNodes[0]
node.lastChild   ==  node.childNodes[node.childNodes.length-1]
 
This image gallery projects are as follws :
/***　　　　　　index.html　　　　　　***/
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Image Gallery</title>
  6.     <link rel="stylesheet" href="styles/layout.css" media="screen">
  7. </head>
  8. <body>
  9.  
  10.     <h1>Snapshiots</h1>
  11.     <ul>
  12.         <li>
  13.             <a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;"> Fireworks </a>
  14.         </li>
  15.         <li>
  16.             <a href="images/coffee.jpg" title="A cup of black coffe" onclick="showPic(this); return false;"> Coffee </a>
  17.         </li>
  18.         <li>
  19.             <a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this); return false;"> Rose </a>
  20.         </li>
  21.         <li>
  22.             <a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this); return false;"> Big Ben </a>
  23.         </li>
  24.     </ul>
  25.     <div id="placeholder">
  26.         <img src="data:images/placeholder.gif" alt="my image gallery" >
  27.     </div>
  28.     <div id="description">
  29.         <p>Choose an image</p>
  30.     </div>
  31.  
  32.     <script type="text/javascript" src="scripts/showPic.js"></script>
  33.  
  34.     <script type="application/javascript">
  35. //        alert (description.childNodes.length);
  36. //        window.onload = countBodyChildren;
  37. //var description = document.getElementById("description");
  38. //alert (description.childNodes[2].nodeValue);
  39.     </script>
  40. </body>
  41. </html>

/***　　　　　　showPic.js　　　　　　***/

  1. /**
  2.  * Created by Administrator on 9/9/2015.
  3.  */
  4.  
  5. /*
  6.     you can use this function to count how many children nodes the body element contains
  7.  */
  8. function countBodyChildren() {
  9.     var body_element = document.getElementsByTagName("body")[0];
  10.     alert(body_element.nodeType);
  11.     alert( body_element.childNodes.length );
  12. }
  13.  
  14. function showPic(whicPic) {
  15.     var source = whicPic.getAttribute("href");
  16.     var text = whicPic.getAttribute("title");
  17.  
  18.     var placeholder = document.getElementById("placeholder");
  19.     var img = placeholder.getElementsByTagName("img")[0];
  20.     img.setAttribute("src", source);
  21.  
  22.     var description = document.getElementById("description");
  23.     var desc_p = description.getElementsByTagName("p")[0];
  24.     desc_p.firstChild.nodeValue = text;
  25.  
  26. }

/***　　　　　　layout.css　　　　　　***/

  1. body{
  2.     font-family: "Helvetica", "Arial", serif;
  3.     color: #333;
  4.     background-color: #ccc;
  5.     margin: 1em 10%;
  6. }
  7.  
  8. h1{
  9.     color: #333;
  10.     /*background-color: #777;*/
  11. }
  12.  
  13. a{
  14.     color: #c60;
  15.     background-color: transparent;
  16.     font-weight: bold;
  17.     text-decoration: none;
  18. }
  19.  
  20. ul{
  21.     padding:;
  22. }
  23.  
  24. li{
  25.     float: left;
  26.     padding: 1em;
  27.     list-style: none;
  28. }
  29.  
  30. img {
  31.     display: block;
  32.     clear: both;
  33. }

The structure are like the pic shows below :

 
 

A JavaScript Image Gallery的更多相关文章

  1. JavaScript资源大全中文版（Awesome最新版）

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  2. Free Slideshow, Gallery And Lightboxes Scripts

    http://bootstraphelpers.codeplex.com/SourceControl/list/changesets https://github.com/gordon-matt/Bo ...

  3. 35 Gallery – Ajax Slide

    http://html5up.net/overflow (PC,Mobile,Table) http://bridge.net/ https://github.com/bridgedotnet/Bri ...

  4. 2017年最新20个轻量的 JavaScript 库和插件

    下面这个列表中的免费 JavaScript 插件都是今年发布的,没有臃肿的一体化的框架,它们提供轻量级的解决方案,帮助 Web 开发过程更容易和更快.提供的插件可以创建滑块.响应式菜单.模态窗口.相册 ...

  5. mui学习

      改变状态栏的颜色 <meta name="apple-mobile-web-app-capable" content="yes"> <me ...

  6. Github前端项目排名

      Github前端项目排名(2016-04-04) 一.前言 近几年前端技术日新月异,从 RequireJS 到 AngularJS 再到 React,似乎每天都有新的技术诞生.而大神们总能第一时间 ...

  7. 95+强悍的jQuery图形效果插件

    现在的网站越来越离不开图形,好的图像效果能让你的网站增色不少.通过JQuery图形效果插件可以很容易的给你的网站添加一些很酷的效果. 使用JQuery插件其实比想象的要容易很多,效果也超乎想象.在本文 ...

  8. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. Cloneable接口的作用

    Cloneable接口是一个[标记接口],就是没有任何内容 implements Cloneable表示该对象能被克隆,能使用Object.clone()方法.如果没有implements Clone ...

  2. android获取https证书

    最近碰到一个问题, 有朋友问android这边能不能拿到服务器下发的证书,意思就是   自签名证书的https接口,在请求的时候,也没有添加自签名证书进信任列表,直接去发https请求,按照正常htt ...

  3. C#之linq

    本文根据30分钟LINQ教程学习作的笔记. 1.Guid.Empty Guid 结构: 表示全局唯一标识符 (GUID).Empty字段:Guid 结构的只读实例,其值均为零.用来设置初始值.   G ...

  4. Win7系统如何设置FTP详细过程

    1.安装FTP组件 点击:控制面板—>程序和功能—>打开或关闭Windows功能.勾选“FTP服务器”及“FTP服务”“FTP扩展性”,点击“确定”,安装FTP组件. 2.添加FTP站点 ...

  5. linux 命令——43 killall(转）

    Linux 系统中的killall命令用于杀死指定名字的进程(kill processes by name).我们可以使用kill命令杀死指定进程PID的进 程,如果要找到我们需要杀死的进程,我们还需 ...

  6. flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器)

    如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南] 纯手写css兼容代码,需给每个使用的属性加上属性前缀 /*display: flex;写法*/ span ...

  7. 访问虚拟机中web服务的

    经常发现假如我们想弄一点小玩意或跑一些小demo,总是要不断的在自己的工作本本上搭建不同的运行环境,久而久之,本本上充斥着各种软件,速度下降了,同时管理也非常的不方便.于是想到用虚拟机来搭建运行环境, ...

  8. R+hadoop

    这里面的配置 http://www.rdatamining.com/big-data/r-hadoop-setup-guide root@kali:~/hadoop_home/hadoop-1.2.1 ...

  9. C的xml编程-libxml2

    这里主要讲述libxml2在linux下的使用. (以下内容除了linux下的安装步骤是自己写的,其余均出自http://www.blogjava.net/wxb_nudt/archive/2007/ ...

  10. 第29题：LeetCode54:Spiral Matrix螺旋矩阵

    给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ...