<!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"?/>
<title>js漸隱漸現圖片切換效果</title>
<style?type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180%?Arial,?Helvetica,?sans-serif,?"新宋體";}
/*?focus?*/
#focus{width:380px;height:504px;margin:0?auto;}
#focus?div{position:absolute;width:380px;height:504px;overflow:hidden;}
#focus?img{width:380px;height:504px;}
#focus?#focus_img{display:none;}
</style>
</head>
<body>
????<div?id="focus">
????????<div?id="focus_bg"></div>
????????<div?id="focus_show"></div>
????????<div?id="focus_img">
????????????<div?name="focus_img"?id="focus_1">images/asdfw580.jpg|http://sc.chinaz.com/|美女1號</div>
????????????<div?name="focus_img"?id="focus_2">images/sfw580.jpg|http://sc.chinaz.com/|美女2號</div>
????????</div>
????????<script?type="text/javascript">
????????????var?focus_id?=?1;
????????????var?focus_time?=?0;
????????????var?focus_bg?=?"";
????????????var?focus_begin?=?true;
????????????var?focus_interval;
????????????var?focus_count;
????????????var?focus_url?=?"";
????????????var?focus_title?=?"";
????????????if(navigator.appName?==?"Microsoft?Internet?Explorer")
????????????{
????????????????focus_count?=?document.getElementById("focus_img").childNodes.length;
????????????}else{
????????????????focus_count?=?document.getElementsByName("focus_img").length;
????????????}
????????????function?func_focus()
????????????{
????????????????if(focus_id?>?focus_count)?focus_id?=?1;
????????????????if(!focus_begin)?clearInterval(focus_interval);
????????????????focus_interval?=?setInterval("focus_show("?+?focus_id?+?")",50);
????????????}
????????????function?focus_show(id)
????????????{
????????????????if(focus_time?<?20?&&?focus_bg?!=?"")
????????????????{
????????????????????var?v?=?100?/?20;
????????????????????if(navigator.appName=="Microsoft?Internet?Explorer")
????????????????????{
????????????????????????document.getElementById("focus_show").style.filter?=?"Alpha(Opacity="?+?(v?*?focus_time)?+?")";
????????????????????}else{
????????????????????????document.getElementById("focus_show").style.opacity?=?v?*?focus_time?/?100;
????????????????????}
????????????????????focus_time?++;
????????????????}else?if(focus_count?>?0){
????????????????????if(!focus_begin)
????????????????????{
????????????????????????document.getElementById("focus_bg").innerHTML?=?"<img?src='"?+?focus_bg?+?"'?/>";
????????????????????????focus_time?=?0;
????????????????????????clearInterval(focus_interval);
????????????????????}
????????????????????var?val?=?document.getElementById("focus_"?+?focus_id).innerHTML;
????????????????????var?arr?=?val.split("|");
????????????????????if(navigator.appName=="Microsoft?Internet?Explorer")
????????????????????{
????????????????????????document.getElementById("focus_show").style.filter?=?"Alpha(Opacity=0)";
????????????????????}else{
????????????????????????document.getElementById("focus_show").style.opacity?=?0;
????????????????????}
????????????????????document.getElementById("focus_show").innerHTML?=?"<a?href='"?+?focus_url?+?"'?target='_blank'?title='"?+?focus_title?+?"'><img?src='"?+?arr[0]?+?"'?/></a>";
????????????????????focus_url?=?arr[1];
????????????????????focus_title?=?arr[2];
????????????????????if(focus_count?>?1)?focus_id?++;
????????????????????if(!focus_begin)?focus_interval?=?setInterval("func_focus()",3000);?else?focus_begin?=?false;
????????????????????focus_bg?=?arr[0];
????????????????}
????????????}
????????????func_focus();
????????</script>
????</div><!--focus?end-->
</body>
</html>
請問下各位大神，這段js代碼如何理解？圖片的漸隱漸現。
天空雨了
2016-07-03 16:07:03
