我在網路上下載了一個網站的部分原始碼，看到裡面有實現CSDN首頁圖片的切換效果。雖然以前看網路上有許多轉載的，但是裡面的程式碼都是在js中定義一個數組來存放圖片的信息，但是今天這個方法更加靈活啊！只需要以下幾步即可。
1.建立sql資料庫：
CREATE TABLE [dbo].[images] (
[imageid] [int] IDENTITY (1, 1) NOT NULL ,
[imgUrl] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[imgText] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[imgLink] [nvarchar] (100) COLLATE Chinese_PRC_CI_AS NULL ,
[imgAlt] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL
) ON [nvarcharY] 50)
COLLATE Chinese_PRC_CI_ASNULL ) ON [nvarMARY]
2
StyleSheet2.css" rel="stylesheet" type="text/css" />
3.寫js程式碼：（不知道為什麼放在一個單獨的js檔案不行）
<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 Time =5000; //每張圖切換時間(單位毫秒);
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=imgUrls.split("
,"); imgLink=imgUrls.split(",");
imgAlt=imgUrls.split(",");
function changeimg(n)
{
adNum=n;
window.clearInterval(theTimer);
adNum=adNum-1;
nextAd();
}
function goUrl(){
window.open(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=1;i<imgUrl .length;i++)
{
document.write('<a id="link'+i+'" href="javascript:changeimg('+i+')" class="button" style="cursor:hand; " title= "'+imgAlt[i]+'" onFocus="this.blur()">'+i+'</a>');
}
//數字按鈕程式碼結束
document.write('</div>');
document.write('</div>');
document.write('</div>');
document.write('</div>');
}
//IE結束
</script>
裡面重要的地方都有註解了，直接複製到你的aspx程式碼即可。
注意：在<body></body>中不要<form></form>標籤，直接在<div align=left>
</div>中輸入上面的js程式碼即可。不知道為什麼有form總是報imgInit錯誤。
4.在cs進行資料庫呼叫：直接程式碼了，呵呵呵不會看不懂吧
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
bind();
}
}
public string imgUrl = " ", imgLink = "", imgtext = "", imgAlt = "";
void bind()
{
using (SqlConnection connection = new SqlConnection("server=.;database=northwind;uid=sa;pwd=123"))
{
SqlDataAdapter sda = new SqlDataAdapter("select top 5 * from images order by imageid desc", connection);
DataSet ds = new DataSet();
DataTable dt = new DataTable();
sda.Fill();
dt = ds.Tables [0];
for (int i = 0; i < dt.Rows.Count; i++)
{
imgUrl += dt.Rows[i]["imgUrl"].ToString() + ",";
imgtext += dt. Rows[i]["imgText"].ToString() + ",";
imgLink += dt.Rows[i]["imgLink"].ToString() + ",";
imgAlt += dt.Rows[i] ["imgAlt"].ToString() + ",";
}
}
}
測試環境：vs2005
如果看不錯對你有用麻煩頂一下！如果有好的建議或好的解決方案也麻煩你分享一下，謝謝！
E-mail:[email protected]
QQ:37210956