小代码片段

自从ie对flash的显示方式进行改变后，flash这个东西一下子变成了一个鸡肋。
许许多多的网站都撤掉了以前的flash动画，改用一段js程序来实现动画功能.

csdn首页也是如此。。我无聊，自己写了一个，特点如下：

1.对搜索引擎友好
2.对美工友好，因为数据和代码是分开的，完全不懂js的都可以用fontpage修改动画内容

可以把js代码保存为一个文件 然后<script src="1.js"></script>,然后无须修改代码一个字母
就可以在多个页面中实现动画了

代码如下:

<style>
#g_div{text-align:right;overflow:hidden}
.b{width:24px; height:16px; background:#737373; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
.b:hover{width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
.bhover{width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
</style>

<div id="g_div" style="width:270px;height:252px"><a
href="#" target=_blank><img
id="g_img" style="FILTER:revealTrans(duration=1,transition=23);width:266px;height:220px;border:1px green solid"
</a><a 
target="_blank">1.CSDN程序员</a><a 
  target="_blank">2.CSDN程序员</a><a 
   target="_blank">3.CSDN程序员</a><a 
  target="_blank">4.CSDN程序员</a><a
target="_blank">5.CSDN程序员</a>
</div>

<script language="JavaScript">
function f(){
 var g_sec=3          //几秒后切换图片
 var g_items=new Array()
 var g_div=document.getElementById("g_div")
 var g_img=document.getElementById("g_img")
 var g_imglink=g_img.parentElement
 var arr=g_div.getElementsByTagName("A")
 var arr_length=arr.length
 var g_index=1 
 
 var show_img=function(n){  
   if (/\d+/.test(n)){  
  var prev=g_index+1
  g_index=n-1
   }else{   
  var prev=(g_index>arr.length)?(arr_length-1):g_index+1
  g_index=(g_index<arr_length-2)?(++g_index):0
   } 
   if (document.all){
    g_img.filters.revealTrans.Transition=23;
   g_img.filters.revealTrans.apply();
   g_img.filters.revealTrans.play();
    }
  arr[prev].className="b"  
  arr[g_index+1].className="bhover"
  g_img.src=g_items[g_index].img.src
  g_img.title=g_items[g_index].txt
  g_imglink.href=g_items[g_index].url  
  g_imglink.target=g_items[g_index].target
  
 }
 
 for(var i=1;i<arr_length;i++){
  g_items.push({txt:arr[i].innerHTML,
   target:arr[i].target,
   img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()})
  arr[i].title=arr[i].innerHTML
  arr[i].innerHTML=[i,"&nbsp;"].join("")
  arr[i].className="b"
  arr[i].onclick=function(){
   event.returnValue=false; 
   show_img(event.srcElement.innerText)  
  }
 }
 show_img(1)  
 var t=window.setInterval(show_img,g_sec*1000)
 g_img.onmouseover=function(){window.clearInterval(t)}
 g_img.onmouseout=function(){t=window.setInterval(show_img,g_sec*1000)} 
}

window.attachEvent("onload",f)
</script>