ideas de carrusel de jquery
Usar jQuery para crear imágenes en carrusel es un efecto especial muy común en las páginas web.
Materiales de herramientas: editor, navegador, jQuery
1. Idea general de implementación:
La primera es la parte de inicialización: excepto el primer carrusel Inesperado. las imágenes están ocultas y los botones de avance y retroceso están ocultos, dejando activo el primer botón de índice.
2. Las ideas específicas de procesamiento de eventos implementadas:
Parte del evento: vincula el procesamiento de eventos cuando el mouse está flotando y saliendo a través de jquery's hover(), el método bind() de jquery Bind mouse. haga clic en eventos para manejar el control de avance, retroceso y carrusel: pre(), next(), play(), start() para iniciar el carrusel automático y stop() para detener el carrusel automático.
3. Un ejemplo de código simple es el siguiente: lt;!DOCTYPE?htmlgt;?
lt;htmlgt;?
lt;headgt;?
lt;meta?charset="UTF-8"gt;?
lt;titlegt;renderizado de carrusel jquery?lt;/titlegt;?
lt; script?type="text/javascript"?src="scripts/jquery-1.9.1.js"gt;lt;/scriptgt;?
lt;style?type="text/css"gt ;? *?{? relleno:?0px;? margen:?0px;? }?a?{? ninguno;? }? .control deslizante, ?.panel deslizante?img, ?.control deslizante-extra?{?ancho:?650px;?alto:?413px;?}? ?30px?auto;?posición:?relativa;?}?.panel deslizante,?.navegación deslizante,?.deslizador-pre,?.deslizador-siguiente?{?posición:?absoluta;?índice z:? 8;? }? .slider-panel?{? posición:?absoluto;? }?slider-panel?img?{? ninguno }? }? .slider-nav?{? margen izquierdo:?-51px;? posición:?absoluta;?color:? #fff;?cursor:?pointer;?margin:?0?2px;?overflow:?hidden;?text-align:?center;?display:? inline-block altura: 18px; : 18px; } .slider-nav .slider-item-selected { fondo: azul } página deslizante?a{?fondo:?rgba(0,?0,?0,?0.2);?filtro:?progid: DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000);?color: ?#fff;? text-align:?center;? display:?block;?
imsun"; tamaño de fuente: 22px; ancho: 28px; alto: 62px; alto de línea: 62px; margen superior: -31px; posición: absoluta; superior: 50;?}? .slider-page?a:HOVER? {?antecedentes:?rgba(0,?0,?0,?0.4);?filtro:?progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000); }? {? izquierda:?100;? margen-izquierda:?-28px;? }?
lt;/stylegt;?
lt;script?type="text/javascript" gt;?$(document).ready(function()?{?var?length,?
currentIndex?=?0,?
intervalo，?
hasStarted?=?false，?//¿Ha comenzado el carrusel?
t?=?3000;?//¿Intervalo de tiempo del carrusel?=?$('.slider-panel'). length;? //¿Ocultar excepto la primera imagen? $('.slider-panel:not(:first)').hide();? //¿Establecer el primer elemento deslizante en estado activo? item: first').addClass('slider-item-selected');? //¿Ocultar los botones de avance y retroceso? $ ('.slider-page').hide(); //Cuando el mouse esté terminado, se muestran los botones de avance y retroceso y se detiene el deslizamiento. Cuando se deja el mouse, los botones de avance y retroceso se ocultan y se inicia el deslizamiento $(' .slider-panel,?.slider-pre,?.slider-? siguiente').hover(función()?{?
stop();?
$('. slider-page').show();? },?función ()?{?
$('.slider-page').hide();?
start ();? });? ').hover(función(e)?{?
stop();?
var?preIndex? =?$(".slider-item").filter(" .slider-item-selected").index();?
currentIndex?=?$(this).index();?
play(preIndex,?currentIndex); ? },?función()?{?
start();? });? $('.slider-pre') .unbind('clic');? pre').bind('hacer clic',?función()?{?
pre();? });? $( '.slider-nex
t').unbind('hacer clic');? $('.slider-next').bind('hacer clic',?función()?{?
siguiente();? }); ? /**?
*?¿Avanzar página?
*/ function?pre()?{?
var?preIndex?=?currentIndex ;?
currentIndex?=?(--currentIndex? ?length)??length;?
play(preIndex,?currentIndex); }?
*?¿Página hacia atrás?
*/ function?next()?{?
var?preIndex?=?currentIndex;?
currentIndex? =? currentIndex??length;?
play(preIndex,?currentIndex);? }? /**?
*?Pasar de la página preIndex a la página currentIndex ?
*?preIndex?Integer, ¿la página de inicio a la que pasar?
*?currentIndex?Integer, ¿la página a la que pasar?
*/ función ?play (preIndex,?currentIndex)?{?
$('.slider-panel').eq(preIndex).fadeOut(500)?
.parent(). ).eq(currentIndex).fadeIn(1000);?
$('.slider-item').removeClass('slider-item-selected');?
$ ('.slider-item').eq(currentIndex).addClass('slider-item-selected');? }? /**?
*?¿Iniciar carrusel?
*/ function?start()?{?
if(!hasStarted)?{?
hasStarted?=?true;?
intervalo?= ?setInterval(siguiente,?t);?
}? /**?
*?Detener carrusel?
*/ function?stop( )?{?
clearInterval(intervalo);?
hasStarted?=?false;? }? //¿Iniciar carrusel? >
lt;/scriptgt;?
lt;/headgt;?
lt;bodygt;?lt;div?class="slider"gt ;?lt;ul ?class="slider-main"gt;?
lt;li?class="slider-panel"gt;?
lt;a?href= " title="Imagen 1"?src="images/1.jpg"gt;lt;/agt;?
lt;/ligt;?
lt;li?class ="control deslizante-pa
nel"gt;?lt;a?href="#"gt;lt;img?title="Imagen 2"?src="images/1.jpg"gt;lt;/agt;?
lt;/ligt;?
lt;li?class="panel-deslizante"gt;?
lt;a?href="#"gt;lt;img? title="Imagen 3"?src="images/1.jpg"gt;lt;/agt;?
lt;/ligt;?
lt;li?class= "panel deslizante"gt;?lt;a?href="#"gt;lt;img?title="Imagen 4"?src="images/1.jpg"gt;lt;/agt;?
lt;/ligt;?lt;/ulgt;?lt;div?class="slider-extra"gt;?
lt;ul?class="slider-nav"gt; ?
lt;li?class="slider-item"gt;1lt;/ligt;?
lt;li?class="slider-item"gt;2lt;/ ligt;?
lt;li?class="slider-item"gt;3lt;/ligt;?
lt;li?class="slider-item"gt;4lt ;/ligt;?
lt;/ulgt;?
lt;div?class="slider-page"gt;?
lt;a? class="slider-pre"?href="javascript：;"gt;lt;lt;/agt;?
lt;a?class="slider-next"?href="javascript： ; ;"gt;gt;lt;/agt;?
lt;/divgt;?lt;/divgt;?lt;/divgt;?
lt;/bodygt; ?
lt;/htmlgt;