利用标签打造九图幻灯

作者:hnxinxia…    文章来源:本站整理    点击数:    更新时间:2008-5-27

标签名称:{$MY_9图幻灯}

查询语句:
select top 9 ArticleID,ChannelID,Title,DefaultPicUrl from PE_Article where Status=3 and len(DefaultPicUrl)>0  order by ArticleID desc

标签内容:
<!--轮换图片开始-->
<SCRIPT>
//Alpha:设置透明度
//Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
//Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。
//FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。
//Style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
//StartX和StartY:代表渐变透明效果的开始X和Y坐标。
//FinishX和FinishY:代表渐变透明效果结束X和Y 的坐标。
var widths=300;             
var heights=180;             
var counts=9;
var text=new Array(); 
var stext=new Array(); 
{Loop}
{Infobegin}
img1=new Image ();img1.src='{$InstallDir}{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}';
url1=new Image ();url1.src='{$InstallDir}{$Field(0,GetUrl,Article,1)}';
text[1]="{$Field(2,Text,18,1,0)}";
{Infoend}
{Infobegin}
img2=new Image ();img2.src='{$InstallDir}{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}';
url2=new Image ();url2.src='{$InstallDir}{$Field(0,GetUrl,Article,1)}';
text[2]="{$Field(2,Text,18,1,0)}";
{Infoend}
{Infobegin}
img3=new Image ();img3.src='{$InstallDir}{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}';
url3=new Image ();url3.src='{$InstallDir}{$Field(0,GetUrl,Article,1)}';
text[3]="{$Field(2,Text,18,1,0)}";
{Infoend}
{Infobegin}
img4=new Image ();img4.src='{$InstallDir}{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}';
url4=new Image ();url4.src='{$InstallDir}{$Field(0,GetUrl,Article,1)}';
text[4]="{$Field(2,Text,18,1,0)}";
{Infoend}
{Infobegin}
img5=new Image ();img5.src='{$InstallDir}{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}';
url5=new Image ();url5.src='{$InstallDir}{$Field(0,GetUrl,Article,1)}';
text[5]="{$Field(2,Text,18,1,0)}";
{Infoend}
{Infobegin}
img6=new Image ();img6.src='{$InstallDir}{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}';
url6=new Image ();url6.src='{$InstallDir}{$Field(0,GetUrl,Article,1)}';
text[6]="{$Field(2,Text,18,1,0)}";
{Infoend}
{Infobegin}
img7=new Image ();img7.src='{$InstallDir}{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}';
url7=new Image ();url7.src='{$InstallDir}{$Field(0,GetUrl,Article,1)}';
text[7]="{$Field(2,Text,18,1,0)}";
{Infoend}
{Infobegin}
img8=new Image ();img8.src='{$InstallDir}{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}';
url8=new Image ();url8.src='{$InstallDir}{$Field(0,GetUrl,Article,1)}';
text[8]="{$Field(8,Text,18,1,0)}";
{Infoend}
{Infobegin}
img9=new Image ();img9.src='{$InstallDir}{$Field(1,GetChannel,1)}/{$Field(1,GetChannel,3)}/{$Field(3,Text,0,0,0)}';
url9=new Image ();url9.src='{$InstallDir}{$Field(0,GetUrl,Article,1)}';
text[9]="{$Field(2,Text,18,1,0)}";
{Infoend}
{/Loop}

var nn=1;
var key=0;
function change_img()
{
if(key==0){key=1;}
else if(document.all)
//下面去掉一个后只有切换效果,没有滤镜效果
{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}
//{document.getElementById("pic").filters[0].Play(duration=2);}
eval('document.getElementById("pic").src=img'+nn+'.src');
eval('document.getElementById("url").href=url'+nn+'.src');
eval('document.getElementById("link").href=url'+nn+'.src');

document.getElementById('link').innerHTML='<p title="'+text[nn]+'">'+text[nn]+'</p>';                                       
for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}
document.getElementById("xxjdjj"+nn).className='cxx';

nn++;if(nn>counts){nn=1;}
tt=setTimeout('change_img()',5000);
}
function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
document.write('<style>');
document.write('.axx{padding:1px 1px;border:0px;width:30%;height:28%;margin:1px;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;font:9px sans-serif;background-color:#333;border:0px;width:30%;height:28%;margin:1px;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;font:9px sans-serif;background-color:#666;border:0px;width:30%;height:28%;margin:1px;}');

document.write('.cxx{padding:1px 1px;border:0px;width:30%;height:28%;margin:1px;}');
document.write('a.cxx:link,a.cxx:visited{text-decoration:none;color:#fff;font:9px sans-serif;background-color:#FF0000;border:0px;width:30%;height:28%;margin:1px;}');
document.write('a.cxx:active,a.cxx:hover{text-decoration:none;color:#fff;font:9px sans-serif;background-color:#FF0000;border:0px;width:30%;height:28%;margin:1px;}');

document.write('.bxx{padding:2px 2px;width:80%; float:left;color:#fff; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;text-decoration:none;}');

document.write('</style>');
document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
document.write('<div><a id="url" target="_blank"><img id="pic"  style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=0.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');
                                       
document.write('<div id="font" style="filter:alpha(style=2,opacity=70,finishOpacity=60);background: #000;width:250px;text-align:left;top:-50px;position:relative;margin:1px;height:50px;padding:10px 0px 10px 10px;margin:0px;border:0px; float:left; border-top:1px solid #888;">');
document.write('<a id="link" class="bxx" target="_blank"></a>');
document.write('</div>');

document.write('<div  style="filter:alpha(style=2,opacity=70,finishOpacity=60);background: #000;width:50px;text-align:center;;top:-50px;position:relative;margin:1px;height:50px;padding:1px;margin:0px;border:0px; float:right; border-top:1px solid #888;">');
for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}
document.write('</div></div>');

change_img();
</SCRIPT>

其它内容自己填

效果演示:http://ylauto.vicp.net/cn/ceshi/9pic.asp

 

相关贴:http://bbs.powereasy.net/dispbbs.asp?boardID=67&ID=364302&page=1

感谢hnxinxian提供。

 

文章评论

数据载入中,请稍后……