Descargué parte del código fuente de un sitio web en línea y vi que implementaba el efecto de cambio de la imagen de la página de inicio de CSDN. Aunque hubo muchas reimpresiones en Internet en el pasado, el código interno definía una matriz en js para almacenar la información de la imagen, ¡pero hoy este método es más flexible! Todo lo que necesitas son los siguientes pasos.
1. Cree una base de datos 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. Referencia al código CSS externo
<link href="styles / StyleSheet2.css" rel="stylesheet" type="text/css" />
3. Escribe código js: (no sé por qué no funciona ponerlo en un archivo js separado)
<script language="javascript " type="text/javascript " >
var imgWidth=248; //Ancho de la imagen
var imgHeight=200; //Alto de la imagen
var textFromHeight=21; //Alto del cuadro de texto de enfoque (unidad: px)
var textStyle="whiter" ; //Estilo de clase de texto de enfoque (No es una clase de conexión)
var textLinkStyle="whiter"; //Estilo de clase de conexión de palabra de enfoque
var buttonLineOn="#f60" //Color del subrayado del botón en
var buttonLineOff="#000"; //Color del subrayado del botón desactivado
var TimeOut =5000; //El tiempo de conmutación de cada imagen (unidad: milisegundos
var imgUrl=new Array();
var imgLink
= new Array();
var imgAlt=new Array();
var adNum= 0;
//La hoja de estilo de altura del cuadro de texto de enfoque comienza
document.write
('<style type="text/css">');
'+(imgWidth+2)+';margen: 0px; padding: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">');
hoja de estilo de altura del cuadro de texto
imgUrls="<%=imgUrl%>";//Obtener los atributos del código CS de fondo
imgtexts="<%=imgtext%>";
imgLinks=
"<%=imgLink%>";
%> ";
imgUrl=imgUrls.split(",");
imgtext=imgUrls.split(",");
imgLink=imgUrls.split(",");
imgAlt=imgUrls.split(",");
función changeimg(n)
{
adNum=n;
window.clearInterval(theTimer);
adNum
=adNum-1;
nextAd();
function
goUrl(){
window.open(imgLink[
adNum],'_blank');
NetScape se inicia
if (navigator.appName == "Netscape")
{
document.write('<style type="text/css">');
document.write('.buttonDiv{height:4px;width:21px;}' );
document.write('</style>');
función nextAd(){
if(adNum<(imgUrl.length-1))adNum++;
else adNum=1
; ;
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
//document.getElementById('focustext').innerHTML=imgtext[adNum];//bajo la imagen Mostrar la ruta de la imagen
document.getElementById('imgLink').href=imgLink[adNum];
}
document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="p1"><img src="'+imgUrl[1]+'" nombre= "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">');
//El código del botón numérico comienza
con (var i=1;i<imgUrl. longitud ;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'"> ' +i+'</a>');}
//Fin del código del botón numérico
document.write('</div>');
document.write(
'</div>');
div> ');
nextAd();
}
//NetScape termina
//IE comienza
else
{
var count=0;
i=1;i<imgUrl.length;i++) {
if( (imgUrl[i]!=" ") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
count++;
} else {
break;
}
}
función playTran() {
if (document.all)
imgInit.filters.revealTrans.play();
}
var key=0;
function nextAd(){
if(adNum<count)adNum++
;
if( clave==0 ){
clave=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];//Muestra la rutadel temporizador
debajo del imagen
=setTimeout("nextAd()", TimeOut
}
document.write('<a target=_self href="javascript:goUrl()"><img style="FILTRO: revelaTrans(duración=1,transición=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>');
//El código del botón numérico comienza
con (var i=1;i< imgUrl .length;i++)
{
document.write('<a id="link'+i+'" href="javascript:changeimg('+i+')" class="botón" style="cursor:hand; " título = "'+imgAlt[i]+'" onFocus="this.blur()">'+i+'</a>');
}
//Fin del código del botón numérico
document.write('</div>' );
document.write('</div>');
document.write('</div>');
document.write('</div>');
//
IE termina
</script>
Los lugares importantes que contiene están comentados, simplemente cópielos directamente en su código aspx.
Nota: No utilice la etiqueta <form></form> en <body></body>,
simplemente ingrese el código js anterior directamente en <div align=left> </div>. No sé por qué algunos formularios siempre informan errores de imgInit.
4. Realice llamadas a la base de datos en cs: código directo, jajaja, no puede entenderlo
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
bind()
}
}
public string imgUrl = " " , imgLink = "", imgtext = "", imgAlt = "";
void bind()
{
usando (conexión SqlConnection = new SqlConnection("server=.;database=northwind;uid=sa;pwd=123"))
{
SqlDataAdapter sda = new SqlDataAdapter("seleccione los 5 mejores * del orden de imágenes por imageid desc", conexión);
DataSet ds = new DataTable
dt = new DataTable(
)
; 0];
para (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() + ",
"
;
}
Entorno de prueba: vs2005.
Si se ve bien y es útil para usted, ¡dale el visto bueno! Si tiene alguna buena sugerencia o solución, compártala, ¡gracias!
Correo electrónico: [email protected]
QQ: 37210956