استخدم جافا سكريبت لجلب البيانات من قاعدة البيانات لتحقيق تأثير التبديل لصور الصفحة الرئيسية لـ CSDN

لقد قمت بتنزيل جزء من الكود المصدري لموقع ويب عبر الإنترنت ورأيت أنه يطبق تأثير التبديل لصورة الصفحة الرئيسية لـ 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 [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" // نمط فئة نص التركيز (ليس فئة اتصال)

var textLinkStyle="whiter"; // نمط فئة اتصال الكلمة

var ButtonLineOn="#f60"; // لون الزر الذي تحته خط

var ButtonLineOff="#000"; // لون الزر المسطر

var

TimeOut

=5000; // وقت التبديل لكل صورة (الوحدة: ميلي ثانية)

;

var imgAlt=new Array();

var adNum= 0;

// تبدأ ورقة أنماط ارتفاع مربع النص

document.write

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

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

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

)

;

function Changeimg(n)

{

adNum=n;

window.clearInterval

(

theTimer);

nextAd

()

}

function goUrl(){

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

يبدأ NetScape

إذا (navigator.appName == "Netscape")

{

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

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

(

'</style>');

function

nextAd(){

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

;

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

div> ');

nextAd();

}

// ينتهي NetScape

//

يبدأ IE

else

{

var count=0

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

count++;

} else {

break;

}

}

وظيفة playTran() {

if (document.all)

imgInit.filters.revealTrans.play();

}

var key=0;

function nextAd(){

if(adNum<count)adNum++

;

if( key==0 ){

key=1

} else if (document.all){

imgInit.filters.revealTrans.Transition=23;

imgInit.filters.revealTrans.apply

();

document.images

. imgInit.src=imgUrl[adNum];

=

imgAlt[adNum];

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

;i++)

{

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

}

theTimer

تحت الصورة

=setTimeout("nextAd()", TimeOut }

document.write

('<a target=_self href="javascript:goUrl()"><img style="FILTER: تكشف Trans(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= " 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>');

</div>

')

;

</script>

تم التعليق على الأماكن المهمة فيه، ما عليك سوى نسخها مباشرة إلى كود aspx الخاص بك.

ملاحظة: لا تستخدم علامة <form></form> في <body></body>،

فقط أدخل رمز js أعلاه مباشرةً في <div align=left> </div>. لا أعرف لماذا تُبلغ بعض النماذج دائمًا عن أخطاء imgInit.

4. قم بإجراء استدعاءات لقاعدة البيانات في cs: كود مباشر، هاهاها، لا يمكنك فهمه

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

bind()

}

}

public string imgUrl = " "

=

"

=

"

"، imgAlt = ""

;

حسب

وصف الصورة"، اتصال)؛

DataSet ds = new DataTable

dt = new DataTable()

;

0]

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

{

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

imgtext += dt [i] ["imgText"].ToString () + "؛

imgLink += dt.Rows[i] ["imgLink"].ToString() + "؛

imgAlt += dt.Rows[i] [ "imgAlt"].ToString() + ";"

}

}

}

بيئة الاختبار: vs2005

إذا كانت تبدو جيدة ومفيدة لك، فيرجى إبداء الإعجاب بها! إذا كان لديك أي اقتراحات أو حلول جيدة، يرجى مشاركتها، شكرا لك!

البريد الإلكتروني:[email protected]

س:37210956