62,052
社区成员
发帖
与我相关
我的任务
分享
<script type="text/javascript">
var GB_ROOT_DIR = "./greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
<script language="javascript" type="text/javascript">
var s=function(){
var interv=5000; //лʱ
var interv2=10; //л
var opac1=80; //ֱ
var source="fade_focus" //ֻͼƬid
//ȡ
function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}
function getid(id){return document.getElementById(id)};
var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}
//ͼ
function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
//ƽ㰴ť
function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}
title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
//
var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}
//
var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}
//
var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0 && t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0 && t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};
fadeon();
}
//ʼ
window.onload=s;
</script>
上面是JS代码,下面是在调用的,图片是从数据库中读取出来的,我把读取图片的代码写在homephoto自定义控件中,
<div id="fade_focus">
<div class="loading"></div>
<cm:homephoto ID="homephoto" runat="server" />
</div>
自定义控件代码
<script runat="server">
private void Page_Load(Object source, EventArgs e)
{
if (!Page.IsPostBack)
{
CMSettingphotoCollection cmPhoto=new CMSettingphotoCollection();
cmPhoto.ListAll();
rpPhoto.DataSource = cmPhoto.List;
rpPhoto.DataBind();
}
}
</script>
<asp:repeater id="rpPhoto" runat="server" >
<itemtemplate>
<ul class="ul_1">
<li><a href='<%# ((CMSettingphoto) Container.DataItem).SPGurl %>' target="_blank"><img src="<%# CMSite.RetrieveUrl() + "/" + CMSite.RetrieveResourceRef() + "/"+((CMSettingphoto) Container.DataItem).Experience %>" /></a></li>
</ul>
</itemtemplate>
</asp:repeater>
客户端代码:
<script type="text/javascript">
var focus_width=300 //图片宽度
var focus_height=225 //图片高度
var text_height=25 //文本标题高度
var swf_height = focus_height+text_height
var pics="<%=pics%>"
var links="<%=links%>"
var texts="<%=texts%>"
pics=pics.substring(0,pics.length-1);
links=links.substring(0,links.length-1);
texts=texts.substring(0,texts.length-1);
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'" align="left" hspace="10">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="artical/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="artical/pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('</object>');
</script>
服务器端代码:
SqlDataReader re = (SqlDataReader)FcadeHelper.GetDataHelper).ExecuteReader("select top 6 * from tblArtic");
while (re.Read())
{
pics += re["pic"].ToString() + "|";
links += "detail.aspx?aid=" + re["id"].ToString() + "|";
texts += re["topic"].ToString() + "|";
}