原生态javascript-图片切换效果
最近在看《JavaScript+DOM编程艺术》。好像没什么吸收。
Dom查找方法：
getElementById() //返回id元素
getElementsByTagName() //按照标签名返回该标签集合
getAttribute() //得到该元素某个属性值
setAttribute() //设置元素的属性值
本文主要利用setAttribute() 来改变img的href属性值达到图片切换效果。
按照javascript美术馆写成了这个效果。
源码：
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="Tomi-Eric" />
<meta name="Description" content="Tomi-Eric,练习实例" />
<title>原生态javascript-图片切换效果</title>
<style type="text/css">
/*{margin:0;padding:0}*/
body{font:12px/1.5em "微软雅黑",Arial;background:#f4f4f4}
h1{color:#555; text-shadow:1px 2px #ababab;border-bottom:1px solid #dedede;margin:20px 0;padding:20px 0}
#content{width:960px;margin:0 auto}
ul{overflow:hidden;list-style:none;margin:0;padding:0}
li{float:left;margin-right:10px}
li a{text-decoration:none;color:#555;display:block;border:1px solid #dedede;background:#f5f5f5;text-align:center;padding:5px 20px;border-radius:5px;}
li a:hover{color:#f90;background:#fefefe}
li a.hover{color:#f90;background:#fefefe}
#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}
p#description{text-align:center;font-weight:bold; color:#f90}
</style>
<script type="text/javascript">
window.onload=function(){
//导航按钮a元素集合
var alinks=document.getElementsByTagName("a");
//显示img标签对象
var img_c=document.getElementById("img_content");
//图片描述对象
var p_desc=document.getElementById("description");
//遍历a便签元素，为每个a标签添加click事件
for(var i=0;i<alinks.length;i++){
alinks[i].onclick=function(){
nav_focus(alinks,this,"hover"); //切换高亮元素
p_desc.innerHTML=this.title; //切换图片描述内容
img_c.setAttribute("src",this.href); //更改图片href属性，即切换图片
return false; //阻止a标签默认事件
}
}
alinks[0].click();
}
/*
导航按钮选中高亮函数（objs,obj,styleName）
objs:导航a标签集合
obj:当前点击元素
styleName:选中后的高亮样式
*/
function nav_focus(objs,obj,styleName){
for(var i=0;i<objs.length;i++){
objs[i].className="";
}
obj.className=styleName;
}
</script>
</head>
<body>
<div id="content">
<h1>APPLE STORE</h1>
<ul>
<li><a href="images/apple_1_bigger.jpg" title="i love ipod">iPod</a></li>
<li><a href="images/apple_2_bigger.jpg" title="i love ipad">iPad</a></li>
<li><a href="images/apple_3_bigger.jpg" title="i love iPhone">iPhone</a></li>
<li><a href="images/apple_4_bigger.jpg" title="i love MacAir">Mac Air</a></li>
</ul>
<div id="imgBox">
<img id="img_content" src="images/loading.gif" />
<p id="description">Loading... ...</p>
</div>
<div id="footer">只在FF6中测试.Copyright by ©<a href="http://cnblogs.com/tomieric">Tomi-Eric.</a></div>
</div>
</body>
</html>
