Baixei parte do código-fonte de um site online e vi que ele implementava o efeito de troca da imagem da página inicial do CSDN. Embora existissem muitas reimpressões na Internet no passado, o código interno definia um array em js para armazenar as informações da imagem, mas hoje esse método é mais flexível! Basta seguir os seguintes passos.
1. Crie um banco de dados 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. Referência ao código CSS externo
<link href="styles / StyleSheet2.css" rel="stylesheet" type="text/css" />
3. Escreva o código js: (não sei por que colocá-lo em um arquivo js separado não funciona)
<script language="javascript " type="text/javascript " >
var imgWidth=248; //Largura da imagem
var imgHeight=200; //Altura da imagem
var textFromHeight=21; //Altura da caixa de texto em foco (unidade: px)
var textStyle="whiter" ; //Estilo de classe de texto de foco (não é uma classe de conexão)
var textLinkStyle="whiter"; //Estilo de classe de conexão de palavra de foco
var buttonLineOn="#f60"
; //Cor do sublinhado do botão desativado
var
TimeOut =5000; //Tempo de troca de cada imagem (unidade: milissegundos
)
;
var imgAlt=new Array();
var adNum= 0;
//Foco na folha de estilo da altura da caixa de texto
document.write('<style type="text/css">')
; '+(imgWidth+2)+';margem: 0px; preenchimento:0px;altura:'+(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">');
folha de estilo de altura da caixa de texto
imgUrls="<%=imgUrl%>";//Obter os atributos do código cs de fundo
imgtexts="<%=imgtext%>
"
;
%> ";
imgUrl=imgUrls.split(",");
imgtext=imgUrls.split
(","); imgLink
=imgUrls.split(",");
function changeimg(n)
{
adNum=n;
window.clearInterval(theTimer);
adNum
=adNum-1
}
function
goUrl(){
window.open(imgLink[adNum],'_blank')
;
O NetScape inicia
if (navigator.appName == "Netscape")
{
document.write('<style type="text/css">');
document.write('.buttonDiv{height:4px;width:21px;}' );
document.write('</style>');
função 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];//sob a imagem Exibe o caminho da imagem
document.getElementById('imgLink').href=imgLink[adNum];
}
document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="p1"><img src="'+imgUrl[1]+'" nome= "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">');
//O código do botão numérico começa
for(var i=1;i<imgUrl. comprimento ;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'"> ' +i+'</a>');}
//Fim do código do botão numérico
document.write('</div>')
;document.write(
'</div>');
div> ');
nextAd()
}
//NetScape termina
//IE inicia
else
{
var count=0
;i<imgUrl.length;i++) {
if( (imgUrl[i]!=" ") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
contagem++;
} else {
break;
}
}
função playTran() {
if (document.all)
imgInit.filters.revealTrans.play
();
var
key
=0
;
if
(
chave==0 ){
chave=1
}
senão
(document.all){
imgInit.filters.revealTrans.Transition=23
;
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];//Exibe o caminhotheTimer
sob o imagem
=setTimeout("nextAd()", TimeOut }
document.write
('<a target=_self href="javascript:goUrl()"><img style="FILTER: revelaTrans(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>')
;
imgUrl .length;i++)
{
document.write('<a id="link'+i+'" href="javascript:changeimg('+i+')" class="button" style="cursor:hand; " título = "'+imgAlt[i]+'" onFocus="this.blur()">'+i+'</a>'
}
//Fim do código do botão numérico
document.write('</div>'); );
document.write('</div>');
document.write('</div>');
document.write('</div>
')
;
</script>
Os locais importantes nele são comentados, basta copiá-lo diretamente para o seu código aspx.
Observação: não use a tag <form></form> em <body></body>,
apenas insira o código js acima diretamente em <div align=left> </div>. Não sei por que alguns formulários sempre relatam erros de imgInit.
4. Faça chamadas de banco de dados em cs: Código direto, hahaha, você não consegue entender
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
bind()
}
}
public string imgUrl = " "; , imgLink = "", imgtext = "", imgAlt = "";
void bind()
{
using (conexão SqlConnection = new SqlConnection("server=.;database=northwind;uid=sa;pwd=123"))
{
SqlDataAdapter
sda
= new SqlDataAdapter("selecione os 5 primeiros * da ordem das imagens porimageid
desc", conexão
DataSet ds = new DataSet()
;
0];
for (int i = 0; i < dt.Rows.Count; i++)
{
imgUrl += dt.Rows[i]["imgUrl"].ToString() + ","
; [i]["imgText"].ToString() + ",";
imgLink+=
dt.Rows[i]["imgLink"].ToString() + ",";
"imgAlt"].ToString() + ",
"
;
}
Ambiente de teste: vs2005
Se parece bom e é útil para você, dê um joinha! Se você tiver alguma boa sugestão ou solução, compartilhe-a, obrigado!
E-mail: [email protected]
QQ: 37210956