8.图片切换
Posted bingbing-deng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了8.图片切换相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <!--<a href="javacript:;">切换</a>--> 10 <!--<a href="#">切换</a>--> 11 <a href="http://www.baidu.com" style="margin:10px;display: block" onclick="fn();return false;">切换</a> 12 <img id="img" src="image/1.jpg" width="400px"/> 13 14 <script> 15 //需求：点击a链接，img图片切换（行内式） 16 //步骤： 17 //1.获取事件源和图片 18 //2.绑定事件 19 //3.书写事件驱动程序 20 21 //1.获取事件源和图片 22 // var a = document.getElementsByTagName("a")[0]; 23 // var img = document.getElementById("img"); 24 // //2.绑定事件 25 // a.onclick = function () { 26 // //3.书写事件驱动程序 27 // img.src = "image/2.jpg"; 28 // //return false的目的是禁止a连接跳转； 29 // return false; 30 // } 31 var img = document.getElementById("img"); 32 function fn(){ 33 img.src = "image/2.jpg"; 34 } 35 36 37 </script> 38 39 40 </body> 41 </html>
以上是关于8.图片切换的主要内容，如果未能解决你的问题，请参考以下文章
JQury自动切换图片----带有小图片，代码一共不超过100行
如何使用 xcode 将快照划分为多个片段，以便让用户与每个片段进行交互？