ASP.NET+JS 製作幻燈片
ASPX頁面程式碼：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
<!--
#imgTitle {
FILTER: ALPHA(opacity=70); LEFT: 0px; OVERFLOW: hidden; POSITION: relative; TEXT-ALIGN: right
}
#imgTitle_up {
LEFT: 0px; HEIGHT: 1px; TEXT-ALIGN: left
}
#imgTitle_down {
LEFT: 0px; TEXT-ALIGN: left
}
.imgClass {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; BORDER-BOTTOM: #fff 1px solid
}
#txtFrom {
VERTICAL-ALIGN: middle; PADDING-TOP: 2px; TEXT-ALIGN: center
}
.button {
PADDING-RIGHT: 7px; PADDING-LEFT: 7px; BACKGROUND: #7b7b63; PADDING-BOTTOM: 2px; MARGIN: 0px; FONT: bold 9px sans-serif; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 2px; TEXT-DECORATION: none
}
A.button {
COLOR: #ffffff; FONT-FAMILY: sans-serif; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none
}
A.button:link {
COLOR: #ffffff; FONT-FAMILY: sans-serif; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none
}
A.button:visited {
COLOR: #ffffff; FONT-FAMILY: sans-serif; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none
}
A.button:hover {
BACKGROUND: #fff; COLOR: #fff; FONT-FAMILY: sans-serif; TEXT-DECORATION: none
}
.buttonDiv {
BACKGROUND: #000000; FLOAT: left; VERTICAL-ALIGN: middle; WIDTH: 21px; HEIGHT: 1px; TEXT-ALIGN: center
}
.trans {
FILTER: progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40); WIDTH: 90px; BACKGROUND-COLOR: #000
}
-->
</style>
<title>無標題頁</title>
</head>
<body>
<div>
<script language="javascript" type="text/javascript" >
var imgWidth=248; //圖片寬
var imgHeight=200; //圖片高
var textFromHeight=21; //焦點字框高度 (單位為px)
var textStyle="whiter"; //焦點字class style (不是連線class)
var textLinkStyle="whiter"; //焦點字連線class style
var buttonLineOn="#f60"; //button下劃線on的顏色
var buttonLineOff="#000"; //button下劃線off的顏色
var TimeOut=2000; //每張圖切換時間 (單位毫秒);
var imgUrl=new Array();
var imgLink=new Array();
var imgtext=new Array();
var imgAlt=new Array();
var adNum=0;
//焦點字框高度樣式表 開始
document.write('<style type="text/css">');
document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');
document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;}');
document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+14)+'px;height:18px}');
document.write('</style>');
document.write('<div id="focuseFrom">');
//焦點字框高度樣式表 結束
imgUrls="<%=imgUrl%>";//獲取後臺cs程式碼的屬性
imgtexts="<%=imgtext%>";
imgLinks="<%=imgLink%>";
imgAlts="<%=imgAlt%>";
imgUrl=imgUrls.split(",");
imgtext=imgtexts.split(",");
imgLink=imgLinks.split(",");
imgAlt=imgAlts.split(",");
function changeimg(n)
{
adNum=n;
window.clearInterval(theTimer);
adNum=adNum-1;
nextAd();
}
function goUrl(){
//window.open(imgLink[adNum],'_blank');
window.open('../ent_honors_details.aspx?ID='+imgLink[adNum],'_blank');
}
//NetScape開始
if (navigator.appName == "Netscape")
{
document.write('<style type="text/css">');
document.write('.buttonDiv{height:4px;width:21px;}');
document.write('</style>');
function nextAd(){
if(adNum<(imgUrl.length-1))adNum++;
else adNum=1;
theTimer=setTimeout("nextAd()", TimeOut);
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
//document.getElementById('focustext').innerHTML=imgtext[adNum];//在圖片下面顯示圖片的路徑
document.getElementById('imgLink').href=imgLink[adNum];
}
document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="p1"><img src="'+imgUrl[1]+'" name="imgInit" width='+imgWidth+' height='+imgHeight+' border=1 alt="'+imgAlt[1]+'" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="'+textStyle+'">'+imgtext[1]+'</span></div>');
document.write('<div id="imgTitle">');
document.write('<div id="imgTitle_down">');
//數字按鈕程式碼開始
for(var i=1;i<imgUrl.length;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'">'+i+'</a>');}
//數字按鈕程式碼結束
document.write('</div>');
document.write('</div>');
document.write('</div>');
nextAd();
}
//NetScape結束
//IE開始
else
{
var count=0;
for (i=1;i<imgUrl.length;i++) {
if( (imgUrl[i]!="") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
count++;
} else {
break;
}
}
function playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}
var key=0;
function nextAd(){
if(adNum<count)adNum++ ;
else adNum=1;
if( key==0 ){
key=1;
} else if (document.all){
imgInit.filters.revealTrans.Transition=23;
imgInit.filters.revealTrans.apply();
playTran();
}
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
document.getElementById('link'+adNum).style.background=buttonLineOn;
for (var i=1;i<=count;i++)
{
if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
}
//focustext.innerHTML=imgtext[adNum];//在圖片下面顯示路徑
theTimer=setTimeout("nextAd()", TimeOut);
}
document.write('<a target=_self href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=1,transition=5);" src="javascript:nextAd()" width='+imgWidth+' height='+imgHeight+' border=0 vspace="0" name=imgInit class="imgClass"></a><br>');
document.write('<div id="txtFrom"><span id="focustext" class="'+textStyle+'"></span></div>');
document.write('<div id="imgTitle">');
document.write(' <div id="imgTitle_down"> <a class="trans"></a>');
//數字按鈕程式碼開始
for(var i=0;i<imgUrl.length-2;i++)
{
document.write('<a id="link'+(i+1)+'" href="javascript:changeimg('+(i+1)+')" class="button" style="cursor:hand; " title="'+imgtext[i]+'" onFocus="this.blur()">'+(i+1)+'</a>');
}
//數字按鈕程式碼結束
document.write('</div>');
document.write('</div>');
document.write('</div>');
document.write('</div>');
}
//IE結束
</script>
</div>
</body>
</html>
ASPX.CS頁面程式碼：
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
bind();
}
}
public string imgUrl = "", imgLink = "", imgtext = "", imgAlt = "";
void bind()
{
string sql = "SELECT Top 5 * FROM TB_Honors WHERE (honors_ShowYN = 1) order by honors_ID desc";
DataTable dt = new DataTable();
dt = DBDS.DB(sql).Tables[0];
for (int i = 0; i < dt.Rows.Count; i++)
{
imgUrl += "../honorsPIC/" + dt.Rows[i]["honors_pic"].ToString() + ",";
imgtext += dt.Rows[i]["honors_Title"].ToString() + ",";
imgLink += dt.Rows[i]["honors_ID"].ToString() + ",";
imgAlt += dt.Rows[i]["honors_Title"].ToString() + ",";
}
}
DBDS類程式碼：
public static DataSet DB(string sql)
{
SqlDataAdapter dap = new SqlDataAdapter(sql,ConfigurationManager.AppSettings["connstr"]);
DataSet ds = new DataSet();
dap.Fill(ds);
return ds;
}