Encuentre un efecto especial de evento de clic js, como se describe a continuación.

Pegue el código directamente:

Nota: Introduzca un jquery.js y coloque cinco imágenes (1.jpg, 0.jpg, 0.jpg, 0.jpg, 0.jpg) en él.

<! ¿TIPO DE DOCUMENTO? HTML? ¿público? "-//W3C//DTD?XHTML?1.0?Transition//ES"? "/skin/js/jquery . js "></script>

<Script? tipo = " texto/JavaScript " & gt;

$(función()?{

var?sweet.=?$("#focus ").width() ;? //Obtener el ancho de la imagen de enfoque.

var?$("#focus?ul?李");? //Obtener el número de imágenes de enfoque /p>

var?= ?0;

var?picTimer

//El siguiente código agrega un botón numérico y una barra translúcida detrás del botón Botones de página anterior y página siguiente

. var? btn? "& ltdiv? class='btnBg'>. >;

for(var?I = 0;?i?<?len?i++)?{

btn? +=?"& ltspan & gt& lt/span > ;;

}

$("#focus ").Append(BTN);

$("#focus?.btnBg"). "Opacity", 0.5);

//Agregue un evento deslizable del mouse para el botón pequeño y muestre el contenido correspondiente

<. p>$("#Focus?.btn?span") .css("opacidad", 0.4).mouseover(function()?{

index?=?$("#focus?.btn ?span").index(this);

showPics(index);

}).equation(0). trigger("mouse over");

//Control de transparencia de los botones anterior y siguiente

$("#focus?.posNext").css("opacity", 0.2).hover(function()?{

$(this).stop( Verdadero, Falso). animate({"opacidad":"0.5"},

}, función()? (esto). animate({"opacity":"0.2"}, 300);

});

//Botón Atrás

. $(" # foco? .pre"). clic()?{

index?-=?1;

if (index?==?-1)?{index ?= ?Carril -?1;}

showPics(index);

});

//Botón Siguiente

$ ("#enfoque? . pos"). Haga clic en (función()?{

index?+=?1;

if (index?==?len)?{index?=?0;}

showPics(index);

});

//Este ejemplo se desplaza hacia la izquierda y hacia la derecha, es decir, todos los elementos li en la misma fila flotan hacia a la izquierda, así que aquí necesitamos Calcular el ancho del elemento ul circundante

$(" #focus?ul"); css("width", sWidth?*?(len));

//El mouse está activado. Detiene la reproducción automáticamente al deslizarse en el mapa de enfoque y comienza a reproducirse automáticamente al deslizarse hacia afuera.

hover(función()?{

borrar intervalo(picTimer);

}, función()?{

picTimer?=?setInterval(función() ? {

showPics(index);

index++;

if (index?==?len)? {index?0;}

},4000); //Este 4000 representa el intervalo de reproducción automática, en milisegundos

}). /Función de visualización de imagen, muestra el contenido correspondiente según el valor del índice recibido.

¿Función? mostrarFotos(índice)? {?//Conmutación normal

var? ¿Ahora a la izquierda? =?-índice*ancho;? // Calcula el valor izquierdo del elemento ul según el valor del índice.

$(" #focus?ul"). Detener (Verdadero, Falso). animar({"izquierda":ahoraIzquierda}, 300);? //Ajusta el elemento ul para desplazarte a la posición calculada mediante animate()

$(" #Focus?.btn?span"). eliminarClase("en "). eq(exponente). addClass("en");? //Cambia al efecto seleccionado del botón actual.

$(" #focus?. btn? span"). Detener (Verdadero, Falso). animación({"opacidad":"0.4"}, 300). eq(exponente). Detener (Verdadero, Falso). animar({"opacidad":"1"},300);? //Cambia al efecto seleccionado del botón actual.

}

});

& lt/script & gt;

& lt/head & gt;

& ltbody & gt

& ltdiv? class="wrapper " >

& lth 1 & gt; El desplazamiento de imágenes de Jquery imita las teclas izquierda y derecha del centro comercial QQ para controlar el desplazamiento de cambio de imagen de enfoque

& ltdiv? id = " focus " & gt

& ltul & gt

& lt李& gt& lt¿Respuesta? href="#"? target="_blank " >& ltimg? src="imagenes/01.jpg "? Alt="Descarga del efecto de imagen de enfoque de QQ Mall"? /& gt;& lt/a & gt;& lt/李& gt

& lt李& gt& lt¿Respuesta? href="#"? target="_blank " >& ltimg? src="imagenes/02.jpg "? Alt="Tutorial de efectos de imagen de enfoque de QQ Mall"? /& gt;& lt/a & gt;& lt/李& gt

& lt李& gt& lt¿Respuesta? href="#"? target="_blank " >& ltimg? src="imagenes/03.jpg "? Alt="efecto de imagen de enfoque de jquery mall"? /& gt;& lt/a & gt;& lt/李& gt

& lt李& gt& lt¿Respuesta? href="#"? target="_blank " >& ltimg? src="imagenes/04.jpg "? ¿Alt="código de imagen de enfoque de jquery mall"? /& gt;& lt/a & gt;& lt/李& gt

& lt李& gt& lt¿Respuesta? href="#"? target="_blank " >& ltimg? src="imagenes/05.jpg "? ¿Alt="código fuente de la imagen de enfoque de jquery mall"? /& gt;& lt/a & gt;& lt/李& gt

& lt/ul & gt;

& lt/div & gt;& lt! -¿Enfocar? fin->;

</div><! - ?Papel de regalo? ¿Finalizar? -& gt;

& lt/body & gt;

& lt/html & gt; Espero adoptarlo, ¡gracias!