js实现图片库（改进版 实现了兼容和优化）

html 部分

<ul id="imagegallery">
    <!--onclick="showPic(this); return false;":因为onclick时间处理函数所触发的js代码返回给他的值是false,所以a链接不会跳转-->
    <li><a href="1/1.jpg"   title="我好不好看"><img src="1/1.jpg" alt=""></a></li>
    <li><a href="2/1.jpg"   title="不认识我了"><img src="2/1.jpg" alt=""></a></li>
    <li><a href="3/1.jpg"   title="没见过吧"><img src="3/1.jpg" alt=""></a></li>
</ul>
<img id='placeholder' src="1/1.jpg" alt="my image gallery">
<p id ='description'>45码的鞋子在你脸边徘徊</p>

js部分

//判断鼠标点击的函数
function prepareGallery(){
	//判断是否支持 document.getElementById     document.getElementsByTagName   document.getElementById("imagegallery")
    if(!document.getElementById) return false;
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById("imagegallery")) return false;
   //获取数据
    var gallery  = document.getElementById('imagegallery');
    var links = gallery.getElementsByTagName("a");
    //循环出a的个数 通过循环的索引 从而获取点击事件 如果点击了 就返回 flase 没有就返回true 并且调用showPic函数
    for ( var i = 0 ; i<links.length; i++){
        links[i].onclick = function (){
             return !showPic(this);
        }
    }
}
// window.onload : 方法用于在网页加载完毕后立刻执行的操作

//将函数绑定到window.onload事件上
window.onload = prepareGallery();

//设置更改图片和文字的函数
function showPic(whichpic){
    // 判断图片是都存在
    if(!document.getElementById('placeholder')) return false;
    // whichpic:代表一个节点
    // getAttribute:把href的路径作为参数存储到sourcr
    var sourcr = whichpic.getAttribute("href");
    // 获取idplaceholder
    var placeholder=document.getElementById('placeholder');
    // 使用setAttribute对placeholder元素的src属性进行刷新
    // 将图片的路径刷新
    placeholder.setAttribute("src",sourcr);
    // 更新描述

    // 判断文字是否存在
    if(document.getElementById("description")){
    	//如果有图片就返回图片 没有的话就返回空
        var text = whichpic.getAttribute('title') ? whichpic.getAttribute("title"):" ";
        // 获取id 为description的值
        var description = document.getElementById("description");
        // 测试是否可以获得数据
        // firstChild:返回节点的第一个子节点
        // nodeValue:得到第一个节点的值
        // console.log(description.firstChild.nodeValue);
        // 将text赋值给description，是description达到点击之后改变的效果
        description.firstChild.nodeValue = text;
        // }
    }
    return true;
}

css样式

	body{
        color:#333;
        background-color:#ccc;
        margin:1em 10%;
    }

    h1{
        color:#333;
        background-color:transparent;
    }
    a{
        color:#c60;
        background-color:transparent;
        font-weight:bold;
        text-decoration:none;
    }

    ul{
        padding:0;
    }

    li{
        float:left;
        padding:1em;
        list-style:none;
    }


    img{
        display: block;
        clear:both;
        width:400px;
        height:400px;
    }

    ul li img{
        width:105px;
        height:105px;
    }