Gunakan javascript untuk mengambil data dari database guna mencapai efek peralihan gambar beranda CSDN

Saya mengunduh sebagian kode sumber situs web online dan melihat bahwa kode tersebut menerapkan efek peralihan gambar beranda CSDN. Meskipun dulu ada banyak cetakan ulang di Internet, kode di dalamnya mendefinisikan array di js untuk menyimpan informasi gambar, tetapi saat ini metode ini lebih fleksibel! Yang diperlukan hanyalah langkah-langkah berikut.

1. Buat database 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

) PADA [PRIMARY]

2. Referensi kode css eksternal

<link href="styles / StyleSheet2.css" rel="stylesheet" type="text/css" />

3. Tulis kode js: (Saya tidak tahu mengapa memasukkannya ke dalam file js terpisah tidak berhasil)

<script Language="javascript " type="text/javascript " >

var imgWidth=248; //Lebar gambar

var imgHeight=200; //Tinggi gambar

var textFromHeight=21; //Tinggi kotak teks fokus (unit: px)

var textStyle="whiter" ; //Gaya kelas teks fokus ( Bukan kelas koneksi)

var textLinkStyle="whiter"; //Gaya kelas koneksi kata fokus

buttonLineOn="#

f60";

//Warna tombol yang digarisbawahi tidak aktif

var TimeOut =5000; //Waktu peralihan setiap gambar (satuan: milidetik);

var imgUrl=

new

Array();

var imgAlt=new Array();

var adNum= 0;

//Lembar gaya tinggi kotak teks fokus dimulai

document.write

('<style type="text/css">');

'+(imgWidth+2)+';margin : 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}')

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

lembar gaya tinggi kotak teks

imgUrls="<%=imgUrl%>";//Dapatkan atribut kode cs latar belakang

imgtexts="<%=imgtext%>";

="

<%=imgLink%>";

%> ";

imgUrl=imgUrls.split(",");

imgtext=imgUrls.split

(","); imgLink

=imgUrls.split(",");

fungsi changeimg(n)

{

adNum=n;

window.clearInterval(theTimer);

adNum

=adNum-1;

nextAd();

}

fungsi goUrl(){

window.open(imgLink[adNum],'_blank')

;

NetScape dimulai

jika (navigator.appName == "Netscape")

{

document.write('<style type="text/css">');

document.write('.buttonDiv{height:4px;width:21px;}' );

dokumen.write('</style>');

fungsi nextAd(){

if(adNum<(imgUrl.length-1))adNum++;

else

theTimer=setTimeout("nextAd()", TimeOut) ;

document.images.imgInit.src=imgUrl[adNum];

document.images.imgInit.alt=imgAlt[adNum];

//document.getElementById('focustext').innerHTML=imgtext[adNum];//di bawah gambar Menampilkan jalur gambar

document.getElementById('imgLink').href=imgLink[adNum];

}

document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="p1"><img src="'+imgUrl[1]+'" nama= "imgInit" width='+imgWidth+' height='+imgHeight+' border=1 alt="'+imgAlt[1]+'" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="'+textStyle+'">'+imgteks[1]+'</span></div>');

document.write('<div id="imgTitle">');

document.write('<div id="imgTitle_down">');

//Kode tombol angka dimulai

untuk(var i=1;i<imgUrl. panjangnya ;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'"> ' +i+'</a>');}

//Akhir kode tombol angka

document.write('</div>')

document.write('

</div>');

div> ');

nextAd();

}

//NetScape berakhir

//IE memulai

yang lain

{

var count=0;

untuk (i=1;i<imgUrl.length;i++) {

if( (imgUrl[i]!=" ") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {

count++;

} else {

break;

}

}

fungsi playTran() {

if (dokumen.semua)

imgInit.filters.revealTrans.play();

}

var key=0;

fungsi nextAd(){

if(adNum<count)adNum++

;

if( key==0 ){

key=1

} else if (dokumen.semua){

imgInit.filters.revealTrans.Transition=23;

imgInit.filters.revealTrans.apply

(

)

; imgInit.src=imgUrl[adNum];

document.images.imgInit.alt=imgAlt[adNum];

document.getElementById('link'+adNum).style.background=buttonLineOn;

untuk (var i=1;i<=count ;i++)

{

if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}

}

theTimer

di bawah gambar

=setTimeout("nextAd()", TimeOut }

document.write

('<a target=_self href="javascript:goUrl()"><img style="FILTER: mengungkapkanTrans(durasi=1,transisi=5 ) ;" src="javascript:nextAd()" width='+imgWidth+' height='+imgHeight+' border=0 vspace="0" name=imgInit class="imgClass"></a><br>') ;

dokumen.write('<div id="txtFrom"><span id="focustext" class="'+textStyle+'"></span></div>')

; " imgTitle">');

document.write(' <div id="imgTitle_down"> <a class="trans"></a>');

//Kode tombol angka dimulai

untuk(var i=1;i< imgUrl .length;i++)

{

document.write('<a id="link'+i+'" href="javascript:changeimg('+i+')" class="button" style="cursor:hand; " judul = "'+imgAlt[i]+'" onFocus="this.blur()">'+i+'</a>');

//

Akhir kode tombol angka

document.write('</div>' );

dokumen.tulis('</div>');

dokumen.tulis('</div>');

dokumen.tulis

('</div>')

;

</script>

Tempat-tempat penting di dalamnya diberi komentar, langsung salin saja ke kode aspx Anda.

Catatan: Jangan gunakan tag <form></form> di <body></body>,

cukup masukkan kode js di atas langsung di <div align=left> </div>. Saya tidak tahu mengapa beberapa formulir selalu melaporkan kesalahan imgInit.

4. Lakukan panggilan database di cs: Kode langsung, hahaha, Anda tidak dapat memahaminya

protected void Page_Load(object sender, EventArgs e)

{

if

(

!

Page.IsPostBack)

{

bind();

, imgLink = "", imgtext = "", imgAlt = "";

void bind()

{

menggunakan (koneksi SqlConnection = new SqlConnection("server=.;database=northwind;uid=sa;pwd=123"))

{

SqlDataAdapter sda = new SqlDataAdapter("pilih 5 teratas * dari urutan gambar berdasarkan imageid desc", koneksi);

new

DataSet(

)

; 0];

untuk (int i = 0; i < dt.Rows.Count; i++)

{

imgUrl += dt.Rows[i]["imgUrl"].ToString() + ","

; [i]["imgTeks"].ToString() + ",";

+= dt.Baris

[i]["imgLink"].ToString() + ",";

"imgAlt"].ToString() + ",

"

;

}

Lingkungan pengujian: vs2005.

Jika terlihat bagus dan bermanfaat bagi Anda, silakan beri acungan jempol! Jika Anda memiliki saran atau solusi bagus, silakan bagikan, terima kasih!

Email:[email protected]

QQ:37210956