<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>图片库</title>

<meta name="description" content="">

<meta name="keywords" content="">

<meta name="viewport" content="width=device-width,user-scalable=no">

<style type="text/css">

</style>

</head>

<body>

    <h1 style="text-align:center;">图片库的实现</h1>

    <div>

        <ul id="imgs">

            <li><a  href="img/img1.png" >一世繁华</a></li>

            <li><a  href="img/img2.png" >大好河山</a></li>

            <li><a  href="img/img3.png" >青春.女人</a></li>

        </ul>

        <img id="placeholder" src="img/img4.png" />

    </div>

    <script type="text/javascript">

    function showPic(whichPic){

        var source = whichPic.getAttribute('href');

        var placeholder = document.getElementById('placeholder');

        placeholder.src = source;

    }

    var imgs = document.getElementById('imgs').getElementsByTagName('a');

    for ( var i = ; i < imgs.length; i++ ) {

        imgs[i].onclick=function (e){

            if ( e && e.preventDefault ){

                e.preventDefault();

            }else{

                window.event.returnValue = false;

            }

            showPic(this);

        }

    }

    </script>

</body>

</html>

这是最基本的图片切换，对于我，唯一的重点就是阻止默认行为的应用

《JavaScript+DOM编程艺术》的摘要（三）---图片库实例的更多相关文章

  1. JavaScript DOM编程艺术读书笔记(三)

    第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...

  2. javascript dom编程艺术笔记第三章：DOM操作的5个基本方法

    JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...

  3. JavaScript DOM编程艺术 笔记（三）函数

    函数function 是在你的代码里随时调用的语句 每个函数是个短小的脚本,arguments,传递的参数 function name(arguments){ statements; } functi ...

  4. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  5. 《JavaScript Dom 编程艺术》读书笔记-第4章

    我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...

  6. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  7. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  8. JavaScript DOM编程艺术第一章：JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  9. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  10. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

随机推荐

  1. C#核编之一个简单的C#程序

    构建一个简单的C#应用程序需要注意一下几点: 1.C#要求所有的程序逻辑都包含在一个类型定义中       --->这里的类型指的是(类,接口,结构,枚举,委托中的一个或多个) 2.与其他语言不 ...

  2. InterviewProblems

    package com.xiaoysec; /** * 下面是面试趣医网技术面的时候出现的一个简单的题目 题目的要求是将一个数组中的奇数和偶数进行分离 以奇数在前一部分为例进行解题 * 算法的主要思想 ...

  3. BZOJ 2707: [SDOI2012]走迷宫( tarjan + 高斯消元 )

    数据范围太大不能直接高斯消元, tarjan缩点然后按拓扑逆序对每个强连通分量高斯消元就可以了. E(u) = 1 + Σ E(v) / degree(u) 对拍时发现网上2个程序的INF判断和我不一 ...

  4. OpenCV学习(2)--基本数据结构

    OpenCV的基本数据结构 CvPoint:表示图像中的点 CvPoint2D32f:二维空间中的点 CvPoint3D32f:三维空间中的点 这些都是结构体,并不是C++语言中的类,所以他们的构造函 ...

  5. 加密传输SSL协议8_Apache服务器的安装

    学习了那么多的理论的知识,下面通过在Apache服务器中安装和使用SSL协议,实现安全传输,但是首先要安装好Apache服务器. Apache服务器的安装 Linux下所有的软件的原码的安装都是三部曲 ...

  6. Linux 学习之网络故障排查

    1.ping www.baidu.com 查看高速有没有修通,如果通,但还不能上网:可能是浏览器.中毒等问题2.ping 网关(10.0.0.254),目的是排除物理链路(网线,网卡,驱动,IP设置等 ...

  7. jQuery 源码分析和使用心得 - 文档遍历 ( traversing.js )

    jQuery之所以这么好用, 首先一点就是$()方法和它强大的选择器. 其中选择器使用的是sizzle引擎, sizzle是jQuery的子项目, 提供高效的选择器查询. 有个好消息告诉大家, 就是s ...

  8. 改进的延时函数Delay（使用MsgWaitForMultipleObjects等待消息或超时的到来）

    解决上一节中延时函数占CPU使用率(达50%)的第二种方法是利用消息机制,通过API函数MsgWaitForMultipleObjects等待消息或超时的到来,从而避免使用循环检测使CPU占用率过高. ...

  9. 用OO方式写键盘字母小游戏

    <html>  <head>   <title>0.0</title>   <script>    window.onload=functi ...

  10. Unix/Linux环境C编程入门教程(17) Gentoo LinuxCCPP开发环境搭建

    1. Gentoo Linux是一套通用的.快捷的.完全免费的Linux发行,它面向开发人员和网络职业人员.与其他发行不同的是,Gentoo Linux拥有一套先进的包管理系统叫作Portage.在B ...