啄木鸟测试网--第三方软件测试|软件登记测试|软件测试培训|软件本地化--如何实现广告图片的翻转效果

如何实现广告图片的翻转效果

作者：顾翔（xanggu@yahoo.com）转载请注明出处

实现广告图片的翻转效果,可以使用flash技术，但是也可以使用javascript技术。
<div d=scroll_image onmouseover=bMouseOver=0
style="Z-index: 2; OVERFLOW: hidden; width: 183px; position: absolute; height: 180px"
onmouseout=bMouseOver=1>
<div d=content style="DSPLAY: none">
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><A href="pc/1b.jpg"
target=_blank><img ttle="" alt=""
src="pc/1s.jpg" border=0 ></a>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><A href="pc/2b.jpg"
target=_blank><img ttle="" style="MARGN: 0px" alt=""
src="pc/2s.jpg" border=0 ></p>
</a>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><A href="pc/3b.jpg"
target=_blank><img ttle="" alt=""
src="pc/3s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><A href="pc/4b.jpg"
target=_blank><img ttle="" alt=""
src="pc/4s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><img ttle="" alt=""
src="pc/5s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><img ttle="" alt=""
src="pc/6s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><img ttle="" alt=""
src="pc/7s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><img ttle="" alt=""
src="pc/8s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><img ttle="" alt=""
src="pc/9s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><img ttle="" alt=""
src="pc/10s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><img ttle="" alt=""
src="pc/11s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><img ttle="" alt=""
src="pc/12s.jpg" border=0></A> </p>
</TD>
</TR></TBODY></TABLE>
<TABLE class=unnamed1 cellspacing=0 cellpadding=2 width=180 border=0>
<TBODY>
<TR>
<TD align=mddle>
<p align="center"><img border="0" src="pc/13s.jpg" > </p>
</TD>
</TR></TBODY></TABLE>

<BR>
<BR>

</div>
<script language=Javascript type=text/javascript>
var scrollerheight=parsent(document.getElementByd("scroll_image").style.height);
var html,total_area=0,wat_flag=true;
var bMouseOver = 1;
var scrollspeed = 1;
var watngtme = 2000;
var s_tmp = 0, s_amount = parsent(document.getElementByd("scroll_image").style.height);
var scroll_content=new Array();
var startPanel=0, n_panel=0, =0;

function startscroll()
{

for (=0;<scroll_content.length;++)
n_panel++;

n_panel = n_panel -1 ;
startPanel = Math.round(Math.random()*n_panel);

f(startPanel == 0)
{
=0;
for ( n scroll_content)
nsert_area(total_area, total_area++);
}
else f(startPanel == n_panel)
{
nsert_area(startPanel, total_area);
total_area++;
for (=0; <startPanel; ++)
{
nsert_area(, total_area);
total_area++;
}
}
else f((startPanel > 0) || (startPanel < n_panel))
{
nsert_area(startPanel, total_area);
total_area++;
for (=startPanel+1; <=n_panel; ++)
{
nsert_area(, total_area);
total_area++;
}
for (=0; <startPanel; ++)
{
nsert_area(, total_area);
total_area++;
}
}
window.setTmeout("scrollng()",watngtme);
}
function scrollng(){
f (bMouseOver && wat_flag)
{
for (=0;<total_area;++){
tmp = document.getElementByd('scroll_area'+).style;
tmp.top = parsent(tmp.top)-scrollspeed;
f (parsent(tmp.top) <= -scrollerheight){
tmp.top = scrollerheight*(total_area-1);
}
f (s_tmp++ > (s_amount-1)*scroll_content.length){
wat_flag=false;
window.setTmeout("wat_flag=true;s_tmp=0;",watngtme);
}
}
}
window.setTmeout("scrollng()",1);
}
function nsert_area(dx, n){
html='<div style="z-index:1;margn:0px; width:'+document.getElementByd("scroll_image").style.width+'; position: absolute; top: '+(scrollerheight*n)+'px" d="scroll_area'+n+'">';
html+=scroll_content[dx];
html+='</div>';
document.wrte(html);
}
var newsVar = 0;
obj=document.getElementByd("content");
total_table=obj.getElementsByTagName("table").length;
for(v=0;v<total_table;v++){
scroll_content[v] = '<table width="100%" >'+obj.getElementsByTagName("table")[v].innerHTML+'</table>';
}
startscroll();
</script>

相关链接：软件测试

【打印】【关闭窗口】