ใช้จาวาสคริปต์เพื่อดึงข้อมูลจากฐานข้อมูลเพื่อให้ได้เอฟเฟกต์การสลับของรูปภาพหน้าแรกของ 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 imgUrl=new Array();

imgLink

= new Array();

var imgAlt=new Array();

var adNum= 0;

//โฟกัสสไตล์ชีตความสูงของกล่องข้อความเริ่มต้น

document.write

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

'+(imgWidth+2)+';ระยะขอบ : 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">');

//สิ้นสุดโฟกัส สไตล์ชีตความสูงของกล่องข้อความ

imgUrls="<%=imgUrl%>";//รับแอตทริบิวต์ของโค้ด cs พื้นหลัง

imgtexts="<%=imgtext%>";

="<

%=imgLink%>";

%> ";

imgUrl=imgUrls.split(",");

imgtext=imgUrls.split

(","); imgLink

=imgUrls.split(",");

ฟังก์ชั่น changeimg(n)

{

adNum=n;

window.clearInterval(theTimer);

adNum=adNum-1;

nextAd();

}

ฟังก์ชั่น goUrl(){

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

}

// NetScape เริ่มต้น

ถ้า (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

=1;

theTimer=setTimeout("nextAd()", หมดเวลา) ;

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]+'" ชื่อ= "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">');

// รหัสปุ่มตัวเลขเริ่มต้น

สำหรับ (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>

div> ');

nextAd();

}

//NetScape สิ้นสุด

//IE เริ่ม

อย่างอื่น

{

var count=0;

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

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

count++;

} else {

break;

}

}

ฟังก์ชัน playTran() {

if (document.all)

imgInit.filters.revealTrans.play();

}

var key=0;

ฟังก์ชัน nextAd(){

if(adNum<count)adNum++

;

if( key==0 ){

key=1;

} else if (document.all){

imgInit.filters.revealTrans.Transition=23;

imgInit.filters.revealTrans.apply

(

)

; imgInit.src=imgUrl[adNum];

=

imgAlt[adNum];

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

;i++)

{

if (i!=adNum){document.getElementById('link'+i).style.พื้นหลัง=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="txtFrom"><span id="focustext" class="'+textStyle+'"></span></div>'); document.write( '

<div id= " imgTitle">');

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

// รหัสปุ่มตัวเลขเริ่มต้น

สำหรับ (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 ของคุณโดยตรง

หมายเหตุ: อย่าใช้แท็ก <form></form> ใน <body></body>

เพียงป้อนโค้ด js ด้านบนโดยตรงใน <div align=left> </div> ฉันไม่รู้ว่าเหตุใดบางรูปแบบจึงรายงานข้อผิดพลาด imgInit เสมอ

4. ทำการเรียกฐานข้อมูลใน cs: โค้ดโดยตรง 555 คุณไม่เข้าใจว่ามัน

ป้องกัน void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

bind();

}

}

public string imgUrl = " " , imgLink = "", imgtext = "", imgAlt = "";

void bind()

{

การใช้ (การเชื่อมต่อ SqlConnection = new SqlConnection("server=.;database=northwind;uid=sa;pwd=123"))

{

SqlDataAdapter sda = new SqlDataAdapter("เลือก 5 อันดับสูงสุด * จากรูปภาพเรียงลำดับตาม imageid desc", การเชื่อมต่อ);

DataSet

ds = new DataSet();

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]

QQ:37210956