用一段js程序来实现动画功能_javascript技巧

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

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

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

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


代码如下:

复制代码 代码如下:

 

href="#" target=_blank>id="g_img"  style="max-width:90%" > 
href="http://www.baidu.com/" for="http://zi.csdn.net/xian.gif"  target="_blank">1.CSDN程序员href="http://www.126.com/" for="http://zi.csdn.net/microsoft280_187.jpg"  target="_blank">2.CSDN程序员href="http://mp3.baidu.com/"  for="http://zi.csdn.net/live.gif"   target="_blank">3.CSDN程序员href="http://post.baidu.com/" for="http://zi.csdn.net/new-mba.gif"  target="_blank">4.CSDN程序员href="http://top.baidu.com/" for="http://zi.csdn.net/book.jpg"  target="_blank">5.CSDN程序员 

 

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