JS圖片輪播器，從數據庫讀取圖片進行輪播

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 [PRIMARY]

2.引用外部css代碼

<link href="styles/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 TimeOut=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(ds);

            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() + ",";

            }

        }

    }