<DIV>

<P>最近在看<SPAN color="#336699" .="COLOR: #336699">《JavaScript+DOM编程艺术》。好像没什么吸收。</SPAN></P>

<P><SPAN color="#336699" .="COLOR: #336699">Dom查找方法：<BR>getElementById()&nbsp;&nbsp; //返回id元素<BR>getElementsByTagName()&nbsp; //按照标签名返回该标签集合<BR>getAttribute()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //得到该元素某个属性值<BR>setAttribute()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//设置元素的属性值</SPAN></P>

<P><SPAN color="#336699" .="COLOR: #336699">本文主要利用setAttribute()&nbsp;来改变img的href属性值达到图片切换效果。</SPAN></P>

<P><SPAN color="#336699" .="COLOR: #336699">按照javascript美术馆写成了这个效果。<IMG src="
http://pic002.cnblogs.com/images/2011/134932/2011092201262761.png"></SPAN></P>
;

<P><SPAN color="#336699" .="COLOR: #336699"></SPAN>&nbsp;</P>

<P><SPAN color="#336699" .="COLOR: #336699">源码：</SPAN></P>

<P><SPAN color="#336699" .="COLOR: #336699">&lt;!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
; target=_blank>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>"&gt;<BR>&lt;html
 xmlns="<A href="
http://www.w3.org/1999/xhtml"
; target=_blank>
http://www.w3.org/1999/xhtml</A>"&gt;<BR>&lt;head&gt;<BR>&lt;meta
 http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;<BR>&lt;meta name="Keywords" content="Tomi-Eric" /&gt;<BR>&lt;meta name="Description" content="Tomi-Eric,练习实例" /&gt;<BR>&lt;title&gt;原生态javascript-图片切换效果&lt;/title&gt;<BR>&lt;style type="text/css"&gt;<BR>/
{margin:0;padding:0}
/<BR>body{font:12px/1.5em "微软雅黑",Arial;background:#f4f4f4}<BR>h1{color:#555; text-shadow:1px 2px #ababab;border-bottom:1px solid #dedede ;margin:20px 0;padding:20px 0;box-shadow:0px 1px #fefefe}<BR>#content{width:960px;margin:0 auto}<BR>ul{overflow:hidden;list-style:none;margin:0;padding:0}<BR>li{float:left;margin-right:10px}<BR>li a{text-decoration:none;color:#555;display:block;border:1px solid #dedede;background:#f5f5f5;text-align:center;padding:5px 20px;border-radius:5px;font-weight:bold}<BR>li a:hover{color:#f90;background:#fefefe}<BR>li a.hover{color:#f90;background:#fefefe;}<BR>#imgBox{width:400px;background#fff;margin:20px 0;padding:5px;border:1px solid #ccc;border-radius:2px; background:#fff;box-shadow:1px 1px 2px #ccc;cursor:move}<BR>p#description{text-align:center;font-weight:bold; color:#f90}<BR>&lt;/style&gt;<BR>&lt;script type="text/javascript"&gt;<BR>window.onload=function(){<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //导航按钮a元素集合<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var alinks=document.getElementsByTagName("a");<BR>&nbsp;&nbsp;&nbsp; //显示img标签对象<BR>&nbsp;&nbsp;&nbsp; var img_c=document.getElementById("img_content");<BR>&nbsp;&nbsp;&nbsp; //图片描述对象<BR>&nbsp;&nbsp;&nbsp; var p_desc=document.getElementById("description");<BR>&nbsp;&nbsp;&nbsp; //遍历a便签元素，为每个a标签添加click事件<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for(var i=0;i&lt;alinks.length;i++){<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alinks[i].onclick=function(){<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; nav_focus(alinks,this,"hover");&nbsp;&nbsp; //切换高亮元素<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; p_desc.innerHTML=this.title;&nbsp;&nbsp;&nbsp; //切换图片描述内容<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; img_c.setAttribute("src",this.href);&nbsp;&nbsp; //更改图片href属性，即切换图片<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;&nbsp;&nbsp;&nbsp; //阻止a标签默认事件<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp; }<BR>&nbsp;&nbsp;&nbsp; alinks[0].click(); //默认第一a标签被选中<BR>}<BR>/
<BR>导航按钮选中高亮函数（objs,obj,styleName）<BR>objs:导航a标签集合<BR>obj:当前点击元素<BR>styleName:选中后的高亮样式<BR>
/<BR>function nav_focus(objs,obj,styleName){<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for(var i=0;i&lt;objs.length;i++){<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; objs[i].className="";<BR>&nbsp;&nbsp;}<BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; obj.className=styleName;<BR>}<BR>&lt;/script&gt;<BR>&lt;/head&gt;<BR>&lt;body&gt;<BR>&lt;div id="content"&gt;<BR>&lt;h1&gt;APPLE STORE&lt;/h1&gt;<BR>&lt;ul&gt;<BR>&lt;li&gt;&lt;a href="images/apple_1_bigger.jpg" title="i love ipod"&gt;iPod&lt;/a&gt;&lt;/li&gt;<BR>&lt;li&gt;&lt;a href="images/apple_2_bigger.jpg" title="i love ipad"&gt;iPad&lt;/a&gt;&lt;/li&gt;<BR>&lt;li&gt;&lt;a href="images/apple_3_bigger.jpg" title="i love iPhone"&gt;iPhone&lt;/a&gt;&lt;/li&gt;<BR>&lt;li&gt;&lt;a href="images/apple_4_bigger.jpg" title="i love MacAir"&gt;Mac Air&lt;/a&gt;&lt;/li&gt;<BR>&lt;/ul&gt;<BR>&lt;div id="imgBox"&gt;<BR>&lt;img id="img_content" src="images/loading.gif" /&gt;<BR>&lt;p id="description"&gt;Loading... ...&lt;/p&gt;<BR>&lt;/div&gt;<BR>&lt;div id="footer"&gt;只在FF6中测试.Copyright by &amp;copy;&lt;a href=<A href="
http://cnblogs.com/tomieric"
; target=_blank>
http://cnblogs.com/tomieric</A></SPAN><SPAN
 color="#336699" .="COLOR: #336699">&gt;</SPAN><SPAN color="#336699" .="COLOR: #336699">Tomi-Eric.&lt;/a&gt;&lt;/div&gt;<BR>&lt;/div&gt;<BR>&lt;/body&gt;<BR>&lt;/html&gt;</SPAN></P></DIV>