js动画——图片轮播

 11.对搜索引擎友好
 22.对美工友好，因为数据和代码是分开的，完全不懂js的都可以用fontpage修改动画内容
 3可以把js代码保存为一个文件 然后<script src="1.js"></script>,然后无须修改代码一个字母
 4就可以在多个页面中实现动画了
 5<style>
 6#g_div{}{text-align:right;overflow:hidden}
 7.b{}{width:24px; height:16px; background:#737373; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
 8.b:hover{}{width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
 9.bhover{}{width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
10</style>
11<div id="g_div" style="width:270px;height:252px"><a 
12href="#" target=_blank><img 
13id="g_img" style="FILTER:revealTrans(duration=1,transition=23);width:266px;height:220px;border:1px green solid" src="http://zi.csdn.net/xian.gif">
14</a><a 
15href="http://www.baidu.com/" for="http://zi.csdn.net/xian.gif"  target="_blank">1.CSDN程序员</a><a 
16href="http://www.126.com/" for="http://zi.csdn.net/microsoft280_187.jpg"  target="_blank">2.CSDN程序员</a><a 
17href="http://mp3.baidu.com/"  for="http://zi.csdn.net/live.gif"   target="_blank">3.CSDN程序员</a><a 
18href="http://post.baidu.com/" for="http://zi.csdn.net/new-mba.gif"  target="_blank">4.CSDN程序员</a><a 
19href="http://top.baidu.com/" for="http://zi.csdn.net/book.jpg"  target="_blank">5.CSDN程序员</a>
20</div>
21<script language="JavaScript">
22function f(){
23var g_sec=3          //几秒后切换图片
24var g_items=new Array()
25var g_div=document.getElementById("g_div") 
26var g_img=document.getElementById("g_img") 
27var g_imglink=g_img.parentElement
28var arr=g_div.getElementsByTagName("A")
29var arr_length=arr.length
30var g_index=1
31var show_img=function(n){  
32   if (/\d+/.test(n)){
33var prev=g_index+1
34g_index=n-1
35   }else{   
36var prev=(g_index>arr.length)?(arr_length-1):g_index+1
37g_index=(g_index<arr_length-2)?(++g_index):0
38   } 
39   if (document.all){
40   g_img.filters.revealTrans.Transition=23;
41  g_img.filters.revealTrans.apply();
42  g_img.filters.revealTrans.play();
43    }
44 arr[prev].className="b"  
45 arr[g_index+1].className="bhover"
46 g_img.src=g_items[g_index].img.src
47 g_img.title=g_items[g_index].txt
48 g_imglink.href=g_items[g_index].url  
49 g_imglink.target=g_items[g_index].target
50  
51}
52for(var i=1;i<arr_length;i++){
53g_items.push({txt:arr[i].innerHTML,
54url:arr[i].href,
55target:arr[i].target,
56img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()}) 
57arr[i].title=arr[i].innerHTML
58arr[i].innerHTML=[i,"&nbsp;"].join("")
59arr[i].className="b"
60arr[i].onclick=function(){
61event.returnValue=false;
62show_img(event.srcElement.innerText)
63}
64}
65show_img(1)
66var t=window.setInterval(show_img,g_sec*1000) 
67g_img.onmouseover=function(){window.clearInterval(t)}
68g_img.onmouseout=function(){t=window.setInterval(show_img,g_sec*1000)}  
69}
70window.attachEvent("onload",f) 
71</script>
72