美女相册案例 

<style type="text/css">
        body {
            font-family: "Helvetica", "Arial", serif;
            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;
        }

        #imagegallery {

            list-style: none;
        }

        #imagegallery li {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }

        #imagegallery li a img {
            border: 0;
        }
    </style>
</head>
<body>
    <h2>
        美女画廊
    </h2>

    <ul id="imagegallery">
        <li><a href="../img/10.jpg" title="美女A">
            <img src="../img/10.jpg" width="100" alt="美女1"/>
        </a></li>
        <li><a href="../img/20.jpg" title="美女B">
            <img src="../img/20.jpg" width="100" alt="美女2"/>
        </a></li>
        <li><a href="../img/30.jpg" title="美女C">
            <img src="../img/30.jpg" width="100" alt="美女3"/>
        </a></li>
        <li><a href="../img/40.jpg" title="美女D">
            <img src="../img/40.jpg" width="100" alt="美女4"/>
        </a></li>
    </ul>

    <div style="clear:both"></div>
    <!--显示大图的-->
    <img id="image" src="../img/60.jpg" alt="" width="450"/>
    <p id="des">选择一个图片</p>

    <script>
        function p1(id) {
            return document.getElementById(id);
        }
        //从ul中标签获取所有的a标签
        var imObj=p1("imagegallery").getElementsByTagName("a");
        //遍历循环所有a标签
        for(var i=0;i<imObj.length;i++){
            //为每个a标签注册点击事件
            imObj[i].onclick=function () {
                //为id为img的标签的src赋值
                p1("image").src=this.href;
                //为p标签赋值
                p1("des").innerText=this.title;
                //阻止超链接默认跳转
                return false;
            };
        }

    </script>
posted @ 2018-11-30 20:58  lujieting0  阅读(705)  评论(0)  编辑  收藏  举报