Q/chen.NET之园

…………………………………………C#toWindows Mobile&Asp.NET
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

js动画——图片轮播

Posted on 2007-04-02 14:03  Q/chen  阅读(1815)  评论(2)    收藏  举报
 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"><
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><
15href="http://www.baidu.com/" for="http://zi.csdn.net/xian.gif"  target="_blank">1.CSDN程序员</a><
16href="http://www.126.com/" for="http://zi.csdn.net/microsoft280_187.jpg"  target="_blank">2.CSDN程序员</a><
17href="http://mp3.baidu.com/"  for="http://zi.csdn.net/live.gif"   target="_blank">3.CSDN程序员</a><
18href="http://post.baidu.com/" for="http://zi.csdn.net/new-mba.gif"  target="_blank">4.CSDN程序员</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