《JavaScript+DOM编程艺术》的摘要（三）---图片库实例

<!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 = 0; 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>

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

工作并不只是为了那点工资，而是为了创造一份属于自己的事业