AddClass .next () .prev () Presentación de diapositivas no funcionará

Question

Me gustaría hacer una pequeña presentación de diapositivas con jQuery. El primer problema: si solo tengo la "siguiente función de clic", las imágenes se muestran correctamente una tras otra. Pero si uso la función "anterior", el botón siguiente ya no funcionará. El otro problema: la presentación de diapositivas debe comenzar de nuevo por la primera imagen haciendo clic en el "botón siguiente" después de la última imagen. Quizás alguien tenga una idea. gracias de antemano.

         $("#next").click(function(){
            if($("#gallery li").next("#gallery li").length != 0) {
                var next = $(".toppicture").parent("li").next().children("img");
                $("#gallery li").children("img").removeClass('toppicture');
                $(next).addClass('toppicture');
            }
            else {
                $(this).children("img").removeClass('toppicture');
                $("#gallery li:first-child").children("img").addClass('toppicture');
            }
        });

        $("#prev").click(function(){
            if($("#gallery li").prev("#gallery li").length != 0) {
                var prev = $(".toppicture").parent("li").prev().children("img");
                $("#gallery li").children("img").removeClass('toppicture');
                $(prev).addClass('toppicture');
            }
            else {
                $(this).children("img").removeClass('toppicture');
                $("#gallery li:first-child").children("img").addClass('toppicture');
            }
        });

El "UL" con la ID "Galería" se ve así:

    <li>
<img class="toppicture" src="images/w1.jpg" title="Title #0"/>
    </li>
    <li>
<img  src="images/w2.jpg" title="Title #1"/>
    </li>
    <li>
<img  src="images/w3.jpg" title="Title #2"/>
    </li>

Answer 1

Este no es el control deslizante más simple, pero creo que es el más fácil de entender. jsfiddle

HTML:

<ul id="gallery">
    <li> <img src="http://lorempixel.com/output/people-q-c-640-480-5.jpg" title="Title #0"/> </li>
    <li> <img src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" title="Title #1"/> </li>
    <li> <img src="http://lorempixel.com/output/food-q-c-640-480-3.jpg" title="Title #2"/> </li>
</ul>
<a href="#" id="previous">previous</a> <a href="#" id="next">next</a> 

JS:

function loadSlide(index){
    $('#gallery li').hide()
        .eq(index).show();
}

$('#gallery').data('index',0).find('li').hide();
loadSlide(0);

$('#next').on('click',function(e){
    var index = $('#gallery').data('index'),
    numSlides = $('#gallery li').length;

    index = (index + 1) % numSlides;    
    loadSlide(index);
    $('#gallery').data('index',index);
    e.preventDefault();            
});
$('#previous').on('click',function(e){
    var index = $('#gallery').data('index'),
    numSlides = $('#gallery li').length;

    index = (index + numSlides - 1) % numSlides;
    loadSlide(index);
    $('#gallery').data('index',index);
    e.preventDefault();
});

Evita mucho recorrido (como tu .next() fiasco) separando los roles.

• El cambio de diapositiva se realiza por una función, toma un número y muestra esa diapositiva.

• El número de deslizamiento actual se almacena en la galería en sí utilizando .data()

• Los botones siguientes y anteriores solo tienen que obtener la diapositiva actual y el incremento de la disminución de ese número de manera adecuada, luego llamar al cambiador de diapositivas.

De esta manera, puede expandirse fácilmente en cualquier área en particular. ¿Quieres una transición? Ponlo en el cambio de diapositivo. ¿Quieres las diapositivas para avances automáticos? Establezca un temporizador para llamar al cambiador de diapositivas.

Lo único que separa esta solución de un control deslizante completo es que generalmente encapsularía todo y usaría eventos personalizados en lugar de una función para cambiar la diapositiva. Estaría encantado de extender este ejemplo un poco para mostrarle la diferencia si lo desea.

Answer 2

Aquí un Ejemplo en jsfiddle para ti

Entonces, lo que quieres es algo así como un carrusel. Hay algunos complementos jQuery para manejar este efecto, como este: jarusel por Sorgalla.com