《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>

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

你可能感兴趣的:(JavaScript)