Javascript实现单张图片浏览
利用空闲时间,学习JavaScript语言时写了一个链接浏览单张图片的例子:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"> <HTML> <HEAD> <TITLE>ImageGallery</TITLE> <METANAME="Generator"CONTENT="EditPlus"> <METANAME="Author"CONTENT=""> <METANAME="Keywords"CONTENT=""> </HEAD> <scriptlanguage="javascript"> functionshowPic(whichpic){ varsource=whichpic.getAttribute("href");//获取当前点击的元素的属性href的值 varplaceholder=document.getElementById("placeholder");//获取目标 placeholder.setAttribute("src",source);//设置目标的属性src,从而达到改变图片 vartext=whichpic.getAttribute("title");//获取当前点击的元素的属性title的值 vardescription=document.getElementById("description"); description.firstChild.nodeValue=text;//把点击元素的标题赋给<p> //或者description.childNodes[0].nodeValue=text; } </script> <BODY> <h1>Javascript图片馆</h1> <ul> <li> <ahref="images/fireworks.jpg"title="Image1"onclick="showPic(this);returnfalse;">图片一</a> </li> <li> <ahref="images/coffee.jpg"title="Image2"onclick="showPic(this);returnfalse;">图片二</a> </li> <li> <ahref="images/rose.jpg"title="Image3"onclick="showPic(this);returnfalse;">图片三</a> </li> <li> <ahref="images/bigben.jpg"title="Image3"onclick="showPic(this);returnfalse;">图片四</a> </li> </ul> <imgid="placeholder"src="images/placeholder.gif"alt="myimagegallery"/> <pid="description">选择图片.</p> </BODY> </HTML>
注意:
在标签<a></a>上加事件我们要注意,避免使它执行跳转。
解决方法:函数返回false;事件认为链接没有被点击。
如果href的值是javascript:void(0);也可以不跳转。