J'ai téléchargé une partie du code source d'un site Web en ligne et j'ai constaté qu'il implémentait l'effet de commutation de l'image de la page d'accueil CSDN. Bien qu'il y ait eu de nombreuses réimpressions sur Internet dans le passé, le code à l'intérieur définissait un tableau en js pour stocker les informations de l'image, mais aujourd'hui cette méthode est plus flexible ! Il suffit de suivre les étapes suivantes.
1. Créez une base de données 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. Référencer le code CSS externe
<link href="styles / StyleSheet2.css" rel="stylesheet" type="text/css" />
3. Écrivez le code js : (je ne sais pas pourquoi le mettre dans un fichier js séparé ne fonctionne pas)
<script language="javascript " type="text/javascript " >
var imgWidth=248; //Largeur de l'image
var imgHeight=200; //Hauteur de l'image
var textFromHeight=21; //Hauteur de la zone de texte de mise au point (unité : px)
var textStyle="whiter" ; //Style de classe de texte de focus (pas une classe de connexion)
var textLinkStyle="whiter"; //Style de classe de connexion de mot de focus
var buttonLineOn="#f60"; //Couleur du soulignement du bouton sur
var buttonLineOff="#000"; //Couleur du soulignement du bouton désactivé
var TimeOut =5000; //Le temps de commutation de chaque image (unité : millisecondes);
var imgUrl=new Array();
var imgLink
= new Array();
var imgAlt=new Array();
var adNum= 0;
//La feuille de style de hauteur de zone de texte de focus démarre
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">');
feuille de style de hauteur de zone de texte
imgUrls="<%=imgUrl%>";//Obtenir les attributs du code cs d'arrière-plan
imgtexts="<%=imgtext%>";
imgLinks="
<%=imgLink%>";
%> " ;
imgUrl=imgUrls.split(",");
imgtext
=imgUrls.split(","); imgLink
=imgUrls.split(",");
function changeimg(n)
{
adNum=n;
window.clearInterval(theTimer);
adNum
=adNum-1;
nextAd();
function goUrl(){
window.open(imgLink[adNum],'_blank'
}
//
NetScape démarre
si (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++
;
;
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
//document.getElementById('focustext').innerHTML=imgtext[adNum];//sous l'image Afficher le chemin de l'image
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">');
//Le code du bouton numérique commence
par (var i=1;i<imgUrl. longueur ;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'"> ' +i+'</a>');}
//Fin du code du bouton numérique
document.write('</div>')
;document.write('
</div>');
div> ');
nextAd();
}
//NetScape se termine
//IE démarre
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.Transition=23;
imgInit.filters.revealTrans.apply
(
)
; imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=
imgAlt[adNum];
document.getElementById('link'+adNum).style.background=buttonLineOn;
;i++)
{
if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}
}
//focustext.innerHTML=imgtext[adNum];//Afficher le chemintheTimer
sous le picture
=setTimeout("nextAd()", TimeOut);
}
document.write('<a target=_self href="javascript:goUrl()"><img style="FILTER: révélationTrans(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>');
//Le code du bouton numérique commence
pour (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>');
}
//Fin du code du bouton numérique
document.write('</div>' );
document.write('</div>');
document.write('</div>');
document.write('</div>'
}
//IE se termine
</script>
Les endroits importants sont commentés, il suffit de le copier directement dans votre code aspx.
Remarque : N'utilisez pas la balise <form></form> dans <body></body>,
entrez simplement le code js ci-dessus directement dans <div align=left> </div>. Je ne sais pas pourquoi certains formulaires signalent toujours des erreurs imgInit.
4. Effectuez des appels à la base de données en cs : Code direct, hahaha, vous ne pouvez pas le comprendre
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("sélectionnez les 5 premiers * dans l'ordre des images par imageid desc", connexion);
DataSet
ds = new DataTable
dt = new DataTable()
;
0];
pour (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() + ",";
}
}
}
Environnement de test : vs2005
Si cela semble bon et vous est utile, merci de donner un coup de pouce ! Si vous avez de bonnes suggestions ou solutions, partagez-les, merci !
Courriel : [email protected]
QQ : 37210956