jquery - examples - slider de imagenes html

Very Simple Image Slider/Slideshow con el botón izquierdo y derecho. Sin reproducción automática

Question

Estoy intentando hacer un slider / slideshow muy simple, sin reproducción automática, por favor. Solo quiero ir a la imagen siguiente o anterior al hacer clic. Teniendo algunos problemas como puedes leer a continuación.

Aquí está el jsFiddle http://jsfiddle.net/HsEne/12/ (Acabo de utilizar colores de fondo en lugar de imágenes en el violín, así como cambiar img a los divs, pero es exactamente el mismo problema, por supuesto)

El HTML:

<div id="slider-wrapper">
<div id="slider">
<img class="sp" src="/img1.jpg">
<img class="sp" src="/img2.jpg">
<img class="sp" src="/img3.jpg">
<img class="sp" src="/img4.jpg">
<img class="sp" src="/img5.jpg">
<img class="sp" src="/img6.jpg">
</div>
<img id="button-previous" src="/button-arrow-left.jpg">
<img id="button-next" src="/button-arrow-right.jpg">
</div>

El CSS:

#slider-wrapper {
display: block;
max-width: 790px;
margin: 5% auto;
max-height: 500px;
height: 100%; }
#slider {
display: block;
position: relative;
z-index: 99999;
max-width: 710px;
width: 100%;
margin: 0 auto; }
#button-previous {
position: relative;
left: 0;
margin-top: 40%;
width: 40px;
height: 60px; }
#button-next {
position: relative;
margin-top: 40%;
float: right; }
.sp {
position: absolute; }
#slider .sp {
max-width: 710px;
width: 100%;
max-height: 500px; }

jQuery para el siguiente botón:

jQuery("document").ready(function(){
jQuery("#slider > img:gt(0)").hide();
jQuery("#button-next").click(function() {
jQuery("#slider > img:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.appendTo("#slider");
});
});

El jQuery anterior funciona bien, excepto que omite la primera imagen si un usuario hace clic en el siguiente botón en la última diapositiva. Solo muestra la primera imagen una vez, todas las demás seguirán deslizándose cada vez que se haga clic en siguiente. Por alguna razón mostrar: ninguno se agrega a la primera imagen, pero no sé de dónde viene ese código.

jQuery para el botón anterior:

jQuery("document").ready(function(){
jQuery("#slider > img:gt(0)").hide();
jQuery("#button-previous").click(function() {
jQuery("#slider > img:last")
.fadeOut(1000)
.next()
.fadeIn(1000)
.appendTo("#slider");
});
});

Este código jquery arriba devolverá la imagen recién vista como debería. Pero cuando se hace clic de nuevo, no hace nada.

También probé .prev () en reemplazo de .next (). Funciona bien la primera vez que hace clic en el botón anterior. Supongamos que estamos viendo la Imagen # 4. Cuando hago clic en el botón anterior, voy a la Imagen # 3, como debería. Pero cuando vuelve a hacer clic en él, no va a la Imagen n. ° 2, sino que vuelve a la Imagen n. ° 4, y luego n. ° 3 y luego n. ° 4, repitiéndose.

Answer 1

<script type="text/javascript">
$(document).ready(function(e) {
$(".mqimg").mouseover(function()
{
$("#imgprev").animate({height: "250px",width: "70%",left: "15%"},100).html("<img src=''"+$(this).attr(''src'')+"'' width=''100%'' height=''100%'' />");
})
$(".mqimg").mouseout(function()
{
$("#imgprev").animate({height: "0px",width: "0%",left: "50%"},100);
})
});
</script>
<style>
.mqimg{ cursor:pointer;}
</style>
<div style="position:relative; width:100%; height:1px; text-align:center;">`enter code here`
<div id="imgprev" style="position:absolute; display:block; box-shadow:2px 5px 10px #333; width:70%; height:0px; background:#999; left:15%; bottom:15px; "></div>
<img class=''mqimg'' src=''spppimages/1.jpg'' height=''100px'' />
<img class=''mqimg'' src=''spppimages/2.jpg'' height=''100px'' />
<img class=''mqimg'' src=''spppimages/3.jpg'' height=''100px'' />
<img class=''mqimg'' src=''spppimages/4.jpg'' height=''100px'' />
<img class=''mqimg'' src=''spppimages/5.jpg'' height=''100px'' />

Answer 2

¿Por qué intentar reinventar la rueda? Hay soluciones de presentación de diapositivas jQuery más livianas por ahí, entonces podrías echarle un vistazo, y alguien ya hizo el trabajo duro por ti y pensó en los problemas que podrías enfrentar (compatibilidad entre navegadores, etc.).

jQuery Cycle es una de mis bibliotecas ligeras favoritas.

Lo que quieres lograr se puede hacer solo

 jQuery("#slideshow").cycle({
timeout:0, // no autoplay
fx: ''fade'', //fade effect, although there are heaps
next: ''#next'',
prev: ''#prev''
});

JSFIDDLE PARA VER QUE FÁCIL ES

Answer 3

Después de leer su comentario sobre mi respuesta anterior, pensé que podría poner esto como una respuesta separada.

Aunque aprecio su enfoque de tratar de hacerlo manualmente para obtener una mejor comprensión de jQuery, aún enfatizo el mérito en el uso de marcos existentes.

Dicho eso, aquí hay una solución. He modificado algunos de sus CSS y HTML solo para que sea más fácil para mí trabajar con

TRABAJANDO JS FIDDLE - http://jsfiddle.net/HsEne/15/

Este es el jQuery

$(document).ready(function(){
$(''.sp'').first().addClass(''active'');
$(''.sp'').hide();
$(''.active'').show();
$(''#button-next'').click(function(){
$(''.active'').removeClass(''active'').addClass(''oldActive'');
if ( $(''.oldActive'').is('':last-child'')) {
$(''.sp'').first().addClass(''active'');
}
else{
$(''.oldActive'').next().addClass(''active'');
}
$(''.oldActive'').removeClass(''oldActive'');
$(''.sp'').fadeOut();
$(''.active'').fadeIn();
});
$(''#button-previous'').click(function(){
$(''.active'').removeClass(''active'').addClass(''oldActive'');
if ( $(''.oldActive'').is('':first-child'')) {
$(''.sp'').last().addClass(''active'');
}
else{
$(''.oldActive'').prev().addClass(''active'');
}
$(''.oldActive'').removeClass(''oldActive'');
$(''.sp'').fadeOut();
$(''.active'').fadeIn();
});
});

Entonces ahora la explicación.
Nivel 1
1) Cargue el script en el documento listo.

2) Tome la primera diapositiva y agregue una clase "activa" para que sepamos con qué diapositiva estamos tratando.

3) Oculta todas las diapositivas y muestra la diapositiva activa. Entonces ahora la diapositiva # 1 es bloque de visualización y todo el resto es pantalla: ninguno;

Etapa 2 Trabajar con el botón siguiente evento de clic.
1) Elimine la clase activa actual de la diapositiva que desaparecerá y asígnele la clase oldActive para que sepamos que está en camino a su salida.

2) La siguiente es una declaración if para verificar si estamos al final de la presentación de diapositivas y necesitamos volver al inicio otra vez. Comprueba si oldActive (es decir, la diapositiva saliente) es el último hijo. Si es así, regrese al primer hijo y conviértalo en "activo". Si no es el último hijo, simplemente toma el siguiente elemento (usando .next ()) y dale clase activa.

3) Eliminamos la clase oldActive porque ya no es necesaria.

4) fadeOut todas las diapositivas

5) fundido en las diapositivas activas

Paso 3

Lo mismo que en el paso dos pero usando alguna lógica inversa para atravesar los elementos hacia atrás.

Es importante tener en cuenta que hay miles de formas en que puede lograr esto. Esto es simplemente mi opinión sobre la situación.

Answer 4

Código muy simple para hacer el control deslizante jquery Aquí hay dos div primero es el visor deslizante y el segundo es el contenedor de la lista de imágenes. Solo copie y pegue el código y personalícelo con css.

 <div class="featured-image" style="height:300px">
<img id="thumbnail" src="01.jpg"/>
</div>
<div class="post-margin" style="margin:10px 0px; padding:0px;" id="thumblist">
<img src=''01.jpg''>
<img src=''02.jpg''>
<img src=''03.jpg''>
<img src=''04.jpg''>
</div>
<script type="text/javascript">
function changeThumbnail()
{
$("#thumbnail").fadeOut(200);
var path=$("#thumbnail").attr(''src'');
var arr= new Array(); var i=0;
$("#thumblist img").each(function(index, element) {
arr[i]=$(this).attr(''src'');
i++;
});
var index= arr.indexOf(path);
if(index==(arr.length-1))
path=arr[0];
else
path=arr[index+1];
$("#thumbnail").attr(''src'',path).fadeIn(200);
setTimeout(changeThumbnail, 5000);
}
setTimeout(changeThumbnail, 5000);
</script>