Ever since IE changed the way flash is displayed, flash has suddenly become a useless thing.
Many websites have removed their previous flash animations and instead use a js program to implement the animation function.
The same is true for the csdn homepage. . I was bored, so I wrote one myself, with the following features:
1. Friendly to search engines
2. Friendly to artists, because data and code are separated, and those who don’t understand JS at all can use fontpage to modify it. Animation content
can save the js code as a file and then , and then it can be displayed on multiple pages without modifying the code by just one letter
The animation is implemented in
The code is as follows:
href="#" target=_blank>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">
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程序员
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 }
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 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].innerHTML
arr[i].innerHTML=[i," "].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)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
