javascript 实现图片切换，考虑平稳退化与行为&结构分离

最近在学习JavaScript DOM编程艺术，跟着学习把里面的一个demo 敲了，demo 是小玩意，但是在编程习惯上给了我很大的启发。

考虑“平稳退化”：如果浏览器不支持或者禁用js之后，依旧保证网页的可用性。

将javascript 分离，js负责用户行为，借鉴css样式与内容分离思路，将js与结构和内容分离开来，增强网页的健壮性。

下面直接show code:思路是点击a标签存放图片与事件，img显示图片,通过点击a标签，触发时间，js将img图片切换成点击的a标签的图片。

HTML+css

<body>
<ul id="liId">
<li>
<a href="img/01.jpg" title="天堂未必在前方，但地狱一定在身后" >努力</a>
</li>
<li>
<a href="img/02.jpg" title="逝者如斯夫，不舍昼夜">时间</a>
</li>
<li>
<a href="img/03.jpg" title="学如逆水行舟，不进则退" >学习</a>
</li>
<li>
<a href="img/04.jpg" title="珍惜眼前，活在当下" >珍惜</a>
</li>
<li>
<a href="img/05.jpg" title="拿出你的激情" >热爱</a>
</li>
<li><img src="img/06.jpg" id="place" alt="显示图片" style="width: 600px;height: 600px;border: 1px solid gray;" /></li>
<li><p id="des">this is a demo about img change</p></li>
</ul>
<script type="text/javascript" src="js/test.js"></script>
</body>

JS:

window.onload=function(){//页面加载完后执行
check();
}
function check(){
if(!document.getElementById||!document.getElementsByName) return false;//判断浏览器是否支持DOM
if(!document.getElementById("liId"))return false;//判断id值是否存在
var gallry=document.getElementById("liId");
var links=gallry.getElementsByTagName("a");

for (var i=0;i<links.length;i++) {
links[i].onclick=function(){ //js行为与html结构分离
return showPic(this)?false:true;
}
}
}

function showPic(wichPic){
if(!document.getElementById("place"))return false;
var source=wichPic.getAttribute("href");//获取href
var place=document.getElementById("place");//获取图片id
place.setAttribute("src",source);//替换

if(document.getElementById("des")){
var text=wichPic.getAttribute("title")?wichPic.getAttribute("title"):" ";
var descrip=document.getElementById("des");

descrip.firstChild.nodeValue=text;
return true;
}
}

展示地址：http://runjs.cn/detail/gdmj7rkc

javascript 实现图片切换，考虑平稳退化与行为&结构分离

猜你喜欢