图片库
点击链接实现当前页面对应图片的跳转，
页面结构代码：
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
div{
margin-left: auto;
margin-right: auto;
width: 420px;
}
li{
display: inline-block;
}
</style>
<title></title>
</head>
<body>
<h2>js图片库的使用</h2>
<ul>
<li><a href="images/hover1.jpg" title="pic01">图片一</a></li>
<li><a href="images/hover2.jpg" title="pic02">图片二</a></li>
<li><a href="images/hover3.jpg" title="pic03">图片三</a></li>
<li><a href="images/hover4.jpg" title="pic04">图片四</a></li>
</ul>
<div id="picbox"></div>
<p id="showP">请选择图片</p>
</body>任务分析：
1.获取页面对应的元素；必要时可以增加浏览器是否支持各种方法的检测；
2.获取节点内容；
3.阻止浏览器默认动作；
.....js代码：
<script>
var showP=document.getElementById("showP");
var imgs = document.getElementsByTagName("img")[0];
var links =document.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
links[i].onclick = function (even) {
imgs.setAttribute("src",this.getAttribute("href"));
showP.childNodes[0].nodeValue = this.getAttribute("title");
//showP.innerHTML = this.getAttribute("title");
even.preventDefault();
}
}
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.10.07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读