【DOM】javascript 实现美术馆

大概的思路就是：

　　1  首先网上找5张图片，并且做5张小图片，可以直接编辑修改像素使图片变小

　　2  利用 html+css 完成布局：

　　　　　　首先 创建标题 使用h1 字体，并且居中

　　　　　　然后用一个 ul > li 把小图片加载出来

　　　　　　在也没加载时 用load 事件 把首页图片加载上

　　　　　　然后给 每个li 加点击事件(也可以用js的延时函数 做成轮播效果)，点击事件绑定的函数 就是 替换掉 首页图片 显示自己的大图

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

   <style type="text/css">
        h1
        {
            text-align:center;
            font-size:20px;
        }
        
        #nav li
        {
           list-style-type:none;
           float:left;      
           margin-left:15px;           
        }
        
        #nav img 
        {
            border-width:0;
        }
        
        
        .center
        {
                /*border:1px solid red;*/
                width:700px;
                margin:10px auto;
                /*height:100px;*/
        }
    </style>
View Code






   <script type="text/javascript">
        var ini = function () {
            var div = document.createElement("div");

            div.className = "center";
            div.setAttribute("style", "clear:both;text-align:center;");


            //创建 img图片
            var img = document.createElement("img");
            img.src = "img2/face.JPG";
            img.id = "pic";

            //把图片添加到 div中
            div.appendChild(img);


            document.getElementsByTagName("body")[0].appendChild(div);


            var p = document.createElement("p");
            p.id = "desc";
            p.appendChild(document.createTextNode("点击导航图片，切换图片显示"));
            div.appendChild(p);
        }


        var picCliek = function () {
            var alinks = document.getElementById("nav").getElementsByTagName("a");
            for (var i = 0; i < alinks.length; i++) {
                alinks[i].onclick = function () {
                    var face = document.getElementById("pic");

                    var addre = this.href;
                    var text = this.getAttribute("title")

                    // 设置 face的 图片路径
                    face.src = addre;
                    //alert(addre + "|" + text)

                    // 替换底部的提示文字
                    var p = document.getElementById("desc");
                    p.lastChild.nodeValue = text;
                    //alert(p.value+"|"+text);
                    return false;

                }
            }

        }
        onload = function () {
            ini();
            picCliek();
        }               
    </script>



View Code




</head>
<body>
    <h1>小芳的相册</h1>
    <ul id="nav" class="center">        
        <li><a href="img2/1.jpg" title="图片1"><img src="small2_img/1_small.jpg" /></a></li>
        <li><a href="img2/2.jpg" title="图片2"><img src="small2_img/2_small.jpg" /></a></li>
        <li><a href="img2/3.jpg" title="图片3"><img src="small2_img/3_small.jpg" /></a></li>
        <li><a href="img2/4.jpg" title="图片4"><img src="small2_img/4_small.jpg" /></a></li>
        <li><a href="img2/5.jpg" title="图片5"><img src="small2_img/5_small.jpg" /></a></li>
    </ul>
</body>
</html>




 


 


运行效果如下：


第一次运行：




 


点击上面的小图，会切换对应的大图：




 







            

            
posted @ 
2017-02-17 10:32 
我爱测试胜于爱自己 
阅读(146) 
评论(0) 
 
收藏 
举报