Skype网站的图片播放效果！
在skype.tom.com看到的，蛮漂亮的就挖来了！
[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML>
<HEAD>
<STYLE> /* Rule 23 of [url]http://skype.tom.com/script/skype.css[/url] */ { COLOR: #000000} /* Rule 3 of [url]http://skype.tom.com/script/skype.css[/url] */ TD { FONT-SIZE: 12px; COLOR: #5f5f5f; LINE-HEIGHT: 150%} /* Rule 1 of script/style.css */ BODY { FONT-SIZE: 12px; BACKGROUND-IMAGE: url([img]http://skype.tom.com/image/bg.jpg[/img]); MARGIN: 0px; COLOR: #000000; LINE-HEIGHT: 18px; BACKGROUND-REPEAT: repeat-x; FONT-FAMILY: Arial, 瀹嬩綋,Helvetica, sans-serif; TEXT-DECORATION: none} /* Rule 1 of [url]http://skype.tom.com/script/skype.css[/url] */ BODY { MARGIN: 0px} /* Rule 2 of [url]http://skype.tom.com/script/skype.css[/url] */ BODY { FONT-SIZE: 12px; COLOR: #5f5f5f; LINE-HEIGHT: 150%} /* Rule 28 of [url]http://skype.tom.com/script/skype.css[/url] */ BODY { FONT-SIZE: 12px; BACKGROUND-IMAGE: url([img]http://skype.tom.com/image/bg.jpg[/img]); MARGIN: 0px; COLOR: #000000; LINE-HEIGHT: 18px; BACKGROUND-REPEAT: repeat-x; FONT-FAMILY: Arial, 瀹嬩綋,Helvetica, sans-serif; TEXT-DECORATION: none} /* Rule 4 of script/style.css */ A:link { COLOR: #0083b3} /* Rule 6 of [url]http://skype.tom.com/script/skype.css[/url] */ A:link { COLOR: #0083b3; TEXT-DECORATION: underline} /* Rule 24 of [url]http://skype.tom.com/script/skype.css[/url] */ A:link { COLOR: #000000; TEXT-DECORATION: none} /* Rule 31 of [url]http://skype.tom.com/script/skype.css[/url] */ A:link { COLOR: #0083b3} /* Rule 5 of script/float.css */ A { COLOR: #0f0cbf; TEXT-DECORATION: underline} /* Rule 63 of script/float.css */ .auto_2_left_1_2 { CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 7px; MARGIN: 0px; WIDTH: 392px; PADDING-TOP: 0px; TEXT-ALIGN: center} /* Rule 1 of script/floatPic.css */ #NewsPic { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; LEFT: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 368px; PADDING-TOP: 0px; POSITION: relative; TOP: 0px; HEIGHT: 300px; BORDER-RIGHT-WIDTH: 0px} /* Rule 2 of script/floatPic.css */ #NewsPicTxt { BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 1px; PADDING-BOTTOM: 0px; MARGIN: 3px auto 0px; WIDTH: 365px; COLOR: black; PADDING-TOP: 0px; FONT-FAMILY: Sans-Serif; POSITION: relative; HEIGHT: 0px; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 1px} /* Rule 3 of script/floatPic.css */ #NewsPicTxt A { COLOR: black; TEXT-DECORATION: none} /* Rule 8 of script/floatPic.css */ #NewsPic A { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: none} /* Rule 12 of script/floatPic.css */ #NewsPic .Nav { RIGHT: 0px; WIDTH: 100%; BOTTOM: 0px; POSITION: absolute; HEIGHT: 12px} /* Rule 13 of script/floatPic.css */ #NewsPic .Nav SPAN { DISPLAY: block; BACKGROUND: #000000; FLOAT: right; FONT: 10px Courier; BORDER-LEFT: #ffffff 1px solid; WIDTH: 24px; CURSOR: hand; COLOR: #ffffff; HEIGHT: 100%; TEXT-ALIGN: center} /* Rule 15 of script/floatPic.css */ #NewsPic .Nav SPAN.Normal { BACKGROUND: #000000; FILTER: Alpha(opacity=50); COLOR: white; opacity: .5} /* Rule 16 of script/floatPic.css */ #NewsPic .Nav SPAN A { DISPLAY: block; WIDTH: 100%; COLOR: white; POSITION: relative; HEIGHT: 100%} /* Rule 14 of script/floatPic.css */ #NewsPic .Nav SPAN.Cur { BACKGROUND: #019fe8; COLOR: white} /* Rule 11 of script/floatPic.css */ #NewsPic .Picture { BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; LEFT: 0px; BORDER-LEFT: #ffffff 1px solid; WIDTH: 100%; BORDER-BOTTOM: #ffffff 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 100%} </STYLE>
</HEAD>
<script>
var isIE=!(navigator.userAgent.indexOf('MSIE')==-1);
var news;
var curNew=0;
var timer;
function init()
{
var div=document.getElementById("NewsPic");
if(!div)return;
var nav=document.createElement("DIV");
nav.className="Nav";
var nodes;
if(isIE)
{
nodes=div.childNodes;
}
else
{
nodes=childrenNodes(div.childNodes);
}
news=new Array(nodes.length);
for(var i=nodes.length-1;i>=0;i--)
{
var element=nodes[i];
news[i]={};
news[i].Element=element;
news[i].Text=element.getAttribute("title");
news[i].Url=element.getAttribute("href");
var n=document.createElement("span");
n.innerHTML="<a herf=\"javascript:;\" onclick=\"javascript:curNew="+(i-1)+";change();\">"+(i+1)+"</a>";
if(i==curNew)n.className="Cur";
nav.appendChild(n);
news[i].LinkElement=n;
}
div.appendChild(nav);
curNew--;
change();
}
function childrenNodes(node)
{
var c=new Array();
for(var i=0;i<node.length;i++)
{
if(node[i].nodeName.toLowerCase()=="a")
c.push(node[i]);
}
return c;
}
function change()
{
var div=document.getElementById("NewsPic");
var text=document.getElementById("NewsPicTxt");
if(!div)return;
curNew=curNew+1;
if(curNew>=news.length)curNew=0;
for(var i=0;i<news.length;i++)
{
if(i==curNew)
{
news[i].Element.style.display="block";
news[i].Element.style.visibility="visible";
news[i].LinkElement.className="Cur";
text.innerHTML="<a href=\""+news[i].Url+"\" title=\""+news[i].Text+"\" target=\"_blank\">"+news[i].Text+"</a>";
}
else
{
news[i].Element.style.visibility="hidden";
news[i].Element.style.display="none";
news[i].LinkElement.className="Normal";
}
}
if(timer)window.clearTimeout(timer);
timer=window.setTimeout("change()",3000);
}
</script>
<BODY>
<TABLE height="300" cellSpacing="0" cellPadding="0" width="778" align="center" border="0"><TBODY><TR><TD vAlign="top" width="390"><TABLE cellSpacing="0" cellPadding="0" width="100%" border="0"> <TBODY><TR><TD vAlign="top"><DIV class="auto_2_left_1_2" style="MARGIN-TOP: 6px; WIDTH: 365px; HEIGHT: 300px"><SPAN id="focuspic"><DIV id="NewsPic"><A title="下载Skype3.5正式版" style="DISPLAY: none; VISIBILITY: hidden" href="http://download.skype.tom.com/Tom-SkypeSetup.exe" target="_blank"><IMG class="Picture" alt="下载Skype3.5正式版" src="http://skype.tom.com/image/index_1_1029.gif" /></A><A title="邮件提醒" style="DISPLAY: none; VISIBILITY: hidden" href="http://skype.tom.com/download/3x/index1.html" target="_blank"><IMG class="Picture" alt="邮件提醒" src="http://skype.tom.com/image/index_2_1026.gif" /></A><A title="动慢表情" style="DISPLAY: block; VISIBILITY: visible" href="http://skype.tom.com/download/3x/index3.html" target="_blank"><IMG class="Picture" alt="动慢表情" src="http://skype.tom.com/image/index_3_1026.gif" /></A><A title="截屏发图" style="DISPLAY: none; VISIBILITY: hidden" href="http://skype.tom.com/download/3x/index4.html" target="_blank"><IMG class="Picture" alt="截屏发图" src="http://skype.tom.com/image/index_4_1026.gif" /></A><A title="话费大比拚" style="DISPLAY: none; VISIBILITY: hidden" href="http://skype.tom.com/products/redeem/" target="_blank"><IMG class="Picture" alt="话费大比拚" src="http://skype.tom.com/image/5.gif" /></A><DIV class="Nav"><SPAN class="Normal"><A onclick="javascript:curNew=3;change();" herf="javascript:;">5</A></SPAN><SPAN class="Normal"><A onclick="javascript:curNew=2;change();" herf="javascript:;">4</A></SPAN><SPAN class="Cur"><A onclick="javascript:curNew=1;change();" herf="javascript:;">3</A></SPAN><SPAN class="Normal"><A onclick="javascript:curNew=0;change();" herf="javascript:;">2</A></SPAN><SPAN class="Normal"><A onclick="javascript:curNew=-1;change();" herf="javascript:;">1</A></SPAN></DIV></DIV><DIV id="NewsPicTxt" style="DISPLAY: none; VISIBILITY: hidden"><A title="动慢表情" href="http://skype.tom.com/download/3x/index3.html" target="_blank">动慢表情</A></DIV></SPAN><SCRIPT language="javascript"> init(); </SCRIPT></DIV></TD></TR><TR><TD vAlign="middle" align="left"><A href="http://skype.tom.com/products/redeem/" target="_blank"><IMG height="52" src="http://skype.tom.com/image/buy.gif" width="371" border="0" /></A></TD></TR></TBODY> </TABLE></TD></TR></TBODY></TABLE>
</BODY>
</HTML>[/html]