Ich habe einen Teil des Quellcodes einer Website online heruntergeladen und festgestellt, dass er den Umschalteffekt des CSDN-Homepage-Bildes implementiert. Obwohl es in der Vergangenheit viele Nachdrucke im Internet gab, definierte der darin enthaltene Code ein Array in js zum Speichern der Bildinformationen, aber heute ist diese Methode flexibler! Es sind lediglich die folgenden Schritte erforderlich.
1. Erstellen Sie eine SQL-Datenbank:
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. Referenzieren Sie externen CSS-Code
<link href="styles / StyleSheet2.css" rel="stylesheet" type="text/css" />
3. JS-Code schreiben: (Ich weiß nicht, warum das Einfügen in eine separate JS-Datei nicht funktioniert)
<script language="javascript " type="text/javascript " >
var imgWidth=248; //Bildbreite
var imgHeight=200; //Bildhöhe
var textFromHeight=21; //Höhe des Fokustextfelds (Einheit: px)
var textStyle="whiter" ; //Textklassenstil fokussieren (keine Verbindungsklasse)
var textLinkStyle="whiter"; //Wortverbindungsstil fokussieren
var buttonLineOn="#f60" //Farbe der Schaltflächenunterstreichung
var buttonLineOff="#000"; //Farbe der Schaltflächenunterstreichung aus
var TimeOut =5000; //Die Umschaltzeit jedes Bildes (Einheit: Millisekunden);
var
imgtext
=new Array();
var imgAlt=new Array();
var adNum= 0;
//Fokus-Textfeldhöhe-Stylesheet startet
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">');
Stylesheet für die Textfeldhöhe
imgUrls="<%=imgUrl%>";//Holen Sie sich die Attribute des Hintergrund-CS-Codes
imgtexts="<%=imgText%>";
imgLinks=
"<%=imgLink%>";
%> ";
imgUrl=imgUrls.split(",")
;
imgLink=imgUrls.split(",
");
function changeimg(n)
{
adNum=n;
adNum=adNum-1;
nextAd
(
}
function
goUrl
(){
window.open(imgLink[adNum],'_blank');
NetScape startet
if (navigator.appName == "Netscape")
{
document.write
('<style type="text/css">');
);
document.write(
'</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];//unter dem Bild Zeigen Sie den Pfad des Bildes
an 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">');
//Der Zahlentastencode beginnt
for(var i=1;i<imgUrl. Länge ;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'"> ' +i+'</a>');}
//Ende des Zahlenschaltflächencodes
document.write('</div>');
document.write(
'</div>');
div> ');
nextAd();
}
//NetScape endet
//IE startet
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++
;
if( key==0 ){
key
=1
}
else if (document.all)
{ imgInit.filters.revealTrans.apply
( )
;
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];//Zeige den PfadtheTimer
unter dem an picture
=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>')
; " imgTitle">');
document.write(' <div id="imgTitle_down"> <a class="trans"></a>');
//Nummernschaltflächencode beginnt
für(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>');
}
//Ende des Zahlenschaltflächencodes
document.write('</div>' );
document.write('</div>');
document.write
('
</div>')
;
</script>
Die wichtigen Stellen darin sind kommentiert, kopieren Sie es einfach direkt in Ihren ASPX-Code.
Hinweis: Verwenden Sie nicht das Tag <form></form> in <body></body>,
sondern geben Sie einfach den obigen js-Code direkt in <div align=left> </div> ein. Ich weiß nicht, warum manche Formulare immer imgInit-Fehler melden.
4. Machen Sie Datenbankaufrufe in cs: Direkter Code, hahaha, Sie können es nicht verstehen
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
= new DataTable()
;
dt
= ds.Tables [ 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"].ToString() + ",";
}
}
}
Testumgebung: vs2005.
Wenn es gut aussieht und für Sie nützlich ist, geben Sie ihm bitte einen Daumen nach oben! Wenn Sie gute Vorschläge oder Lösungen haben, teilen Sie diese bitte mit, vielen Dank!
E-Mail:[email protected]
QQ:37210956