aspx 页面中代码
<!-- FLASH切换图开始 -->
<div id="Div1" style="padding:4px 0px 4px 0px; float:left;" runat="server">
<div id="ifocus">
<div id="ifocus_pic">
<div id="ifocus_piclist" style="left:0; top:0;">
<ul>
<%# FlashPic %>
</ul>
</div>
<div id="ifocus_opdiv"></div>
<div id="ifocus_tx">
<ul><!-- FLASH标题 -->
<%# FlashTitle %>
</ul>
</div>
</div>
<div id="ifocus_btn">
<ul><!-- FLASH缩略图 -->
<%# FlashSmallPic %>
</ul>
</div>
</div>
</div>
<!-- FLASH切换图结束 -->
CS文件中代码
protected void ShowFlash()
{
try
{
using (OleDbConnection conn = qhwins.db.GetConnection())
{
conn.Open();
OleDbCommand cmd = new OleDbCommand(@"select top 4 * from news where [Pic]<>"""" and [title]<>"""" order by id desc", conn);
OleDbDataReader odr = cmd.ExecuteReader();
//odr.Read();
//if (odr.HasRows)
//{
int i = 0;
while (odr.Read())
{
FlashPic = FlashPic + @"<li><a href='/" + WebConfig.ClassIDtoDirName(odr["class_id"].ToString()) + "/" + odr["id"].ToString() + System.Web.HttpContext.Current.Application["PageExt"].ToString() + "' target='_blank'><img src='" + odr["Pic"].ToString() + "'" + " alt='" + odr["title"].ToString() + "' /></a></li>";
FlashTitle += @"<li class='current'>" + odr["title"].ToString() + "</li>";
FlashSmallPic += @"<li id='p" + i + "'><img src='" + odr["pic"].ToString() + "' alt='' /></li>";
i += 1;
}
//}
odr.Close();
odr.Dispose();
this.Page.DataBind();
}
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
CSS样式表:
body {text-align: center;margin:0;padding:0;font-size:12px;color:#353535;font-family: "宋体";}
div,form,img,ul,ol,li,dl,dt,dd,label {margin: 0; padding: 0; border: 0;}
table,td,tr,th{font-size:12px;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
img{border:0;}
li{list-style-type:none;}
/*-------------------------------------------------------*/
/*****首页FLASH图片切换*****/
#ifocus { width:520px; height:250px;border:1px solid #DEDEDE; background:#ffffff;} /* 425 总宽度 */
#ifocus_pic { display:inline; position:relative;float:left;width:410px; height:225px; overflow:hidden; margin:10px 0 0 10px; }
#ifocus_piclist { position:absolute; }
#ifocus_piclist li { width:410px; height:225px; overflow:hidden; display:none}
#ifocus_piclist img { width:410px; height:225px;}
#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0;}
#ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }
#ifocus_btn .current { background: url(/images/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
#ifocus_opdiv { position:absolute; left:0; bottom:0; width:410px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }
#ifocus_tx .normal { display:none; }
用到的Jquery文件jquery-1.2.1.js JquerFlash.txt