- 技术人生
- js动画——图片轮播
js动画——图片轮播
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" src="
http://zi.csdn.net/xian.gif
"></a><a href="
http://www.baidu.com/
" for="
http://zi.csdn.net/xian.gif
" target="_blank">1.程序员</a><a href="
http://www.126.com/
" for="
http://zi.csdn.net/microsoft280_187.jpg
" target="_blank">2.程序员</a><a href="
http://mp3.baidu.com/
" for="
http://zi.csdn.net/live.gif
" target="_blank">3.程序员</a><a href="
http://post.baidu.com/
" for="
http://zi.csdn.net/new-mba.gif
" target="_blank">4.程序员</a><a href="
http://top.baidu.com/
" for="
http://zi.csdn.net/book.jpg
" target="_blank">5.程序员</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.parentElementvar arr=g_div.getElementsByTagName("A")var arr_length=arr.lengthvar g_index=1
var show_img=function(n){ if (//d+/.test(n)){var prev=g_index+1g_index=n-1 }else{ var prev=(g_index>arr.length)?(arr_length-1):g_index+1g_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,
url:arr[i].href
,target:arr[i].target,img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()}) arr[i].title=arr[i].innerHTMLarr[i].innerHTML=[i," "].join("")arr[i].className="b"arr[i].οnclick=function(){event.returnValue=false;show_img(event.srcElement.innerText)}}show_img(1)var t=window.setInterval(show_img,g_sec*1000) g_img.οnmοuseοver=function(){window.clearInterval(t)}g_img.οnmοuseοut=function(){t=window.setInterval(show_img,g_sec*1000)} }
window.attachEvent("onload",f) </script>
