首页 > 代码库 > 同一个网页上切换显示不同的图片
同一个网页上切换显示不同的图片
把图片的浏览链接集中安排在图片的主页面里，当用户点击某个图片的链接就能在当前网页显示
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="http://www.mamicode.com/css/show.css"/></head><body> <h1>picture</h1> <ul> <!----------------- this表示：“这个a元素节点” -----------------------> <!----------------------返回值为true表示链接被点击 为false表示没被点击--------------------------> <li> <a href="http://www.mamicode.com/images/picture1.jpg" title="milk" onclick="showPicture(this);return false;"> 牛奶</a> </li> <li> <a href="http://www.mamicode.com/images/picture2.jpg" title="Maternal and infant" onclick="showPicture(this);return false;"> 儿童</a> </li> <li> <a href="http://www.mamicode.com/images/picture3.jpg" title="The goddess" onclick="showPicture(this);return false;"> 女神</a> </li> <li> <a href="http://www.mamicode.com/images/picture4.png" title="9.9 packages mailed" onclick="showPicture(this);return false;"> 9.9</a> </li> </ul> <img id="placeholder" src="http://www.mamicode.com/images/picture5.jpg" alt="myimage gallery"/> <p id="description">Choose an image.</p></body><script type="text/javascript" src="http://www.mamicode.com/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 = http://www.mamicode.com/source;//非DOM方案改变图片的src属性；"title");//获取obj对象的title属性值并赋给变量text var description=$("description");//得到p元素的id description.firstChild.nodeValue = http://www.mamicode.com/text;//用text变量刷新id值等于description的p元素的第一个子节点的nodeValue属性值；>
同一个网页上切换显示不同的图片
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。