同一个网页上切换显示不同的图片

把图片的浏览链接集中安排在图片的主页面里，当用户点击某个图片的链接就能在当前网页显示

css:代码

ul,li{margin: 0;padding: 0}
body{font-family: "Helvetica","Arial","serif","微软雅黑";color:#333;background-color: #ccc; margin: 1px 10%}
h1{color:#333;background-color: transparent;}
a{ color: #ea183d; background-color: transparent;font-weight: bold;text-decoration: none;}
li{float:left;padding:1em;list-style: none;}
img{ display:block;clear:both;}

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <title>图片切换</title>
    <meta content="text/html" charset="utf-8">
    <link  rel="stylesheet" href="css/show.css"/>
</head>
<body>
    <h1>picture</h1>
    <ul>
        <!----------------- this表示：“这个a元素节点” ----------------------->
        <!----------------------返回值为true表示链接被点击  为false表示没被点击-------------------------->
        <li>
            <a href="images/picture1.jpg" title="milk" onclick="showPicture(this);return false;">
                牛奶</a>
        </li>
        <li>
            <a href="images/picture2.jpg" title="Maternal and infant" onclick="showPicture(this);return false;">
                儿童</a>
        </li>
        <li>
            <a href="images/picture3.jpg" title="The goddess" onclick="showPicture(this);return false;">
               女神</a>
        </li>
        <li>
            <a href="images/picture4.png" title="9.9 packages mailed" onclick="showPicture(this);return false;">
                9.9</a>
        </li>
    </ul>
    <img id="placeholder" src="images/picture5.jpg" alt="myimage gallery"/>
    <p id="description">Choose an image.</p>
</body>
<script type="text/javascript" src="show.js/show.js"></script>

</html>

js:

function $(id){
    return document.getElementById(id);
}
function showPicture(obj){
    var placeholder=$("placeholder");
    var source=obj.getAttribute("href");
    placeholder.setAttribute("src",source);//用setAttribute改变图片的src属性；
//    placeholder.src = source;//非DOM方案改变图片的src属性；
    //在图片链接被点击时动态地用图片的title替换掉图片说明
    var text=obj.getAttribute("title");//获取obj对象的title属性值并赋给变量text
    var description=$("description");//得到p元素的id
    description.firstChild.nodeValue = text;//用text变量刷新id值等于description的p元素的第一个子节点的nodeValue属性值；
}

　　

　　

posted @ 2014-08-24 22:44  木糖醇+杏仁  阅读(510)  评论(0)    收藏  举报