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>

 

posted @ 2016-08-16 19:58  GodCe  阅读(215)  评论(0编辑  收藏  举报