javaScript学习:图片库
Html:
1 <h1>Snapshots</h1> 2 <ul> 3 <li><a href="images/1.jpg" onclick="show(this);return false;" title="one" >第一张图片</a></li> 4 <li><a href="images/2.jpg" onclick="show(this);return false;" title="two" >第二张图片</a></li> 5 <li><a href="images/3.jpg" onclick="show(this);return false;" title="three" >第三张图片</a></li> 6 <li><a href="images/4.jpg" onclick="show(this);return false;" title="four" >第四张图片</a></li> 7 </ul> 8 <!--onclick事件函数触发后返回的是false 所以链接不会被打开 --> 9 <a href="http://www.baidu.com" onclick="return false">click me to baidu</a> 10 <img id="pla" src="images/6.jpg" / alt="图片库">
JavaScript:
1 <script type="text/javascript"> 2 /* 3 把这个函数命名为showPic,给这个函数的参数命名为whichpic 4 获取pla的位置,把把它赋给变量placeholder 5 使用setAttribute方法对placeholder元素的src属性进行刷新 6 }*/ 7 function show(pic){ 8 var sour = pic.getAttribute('href'); 9 var placeholder = document.getElementById('pla'); 10 placeholder.setAttribute('src',sour); 11 } 12 </script>