addClass .next () .prev () слайд-шоу не будет работать

Question

Я хотел бы сделать небольшое слайд-шоу с помощью jquery.Первая проблема: если у меня есть только «функция следующего щелчка», изображения отображаются правильно одно за другим.Но если я использую функцию «prev», следующая кнопка больше не будет работать.Другая проблема: слайд-шоу должно начаться снова с первого изображения, нажав кнопку «Далее» после последнего изображения.Может быть, у кого-то есть идея.заранее спасибо.

         $("#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');
            }
        });

"ul" с идентификатором "gallery" выглядит так:

    <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

Вот пример в jsFiddle для вас

Итак, вы хотите что-то вроде карусели. Есть несколько плагинов jQuery для обработки этого эффекта, например: jCarousel от Sorgalla.com

Answer 2

Это не самый простой слайдер, но я думаю, что его легче всего понять. 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();
});

Это позволяет избежать многих обходов (например, фиаско .next())разделение ролей.

• Смена слайда выполняется функцией, она принимает номер и показывает этот слайд.

• Текущий номер слайда сохраняется наСаму галерею, используя .data()

• Следующим и предыдущим кнопкам просто нужно получить текущий слайд и либо соответственно увеличить приращение на это число, затем вызвать сменщик слайдов.

Таким образом, вы можете легко расширить любую конкретную область.Хотите переход?Поместите это в устройство смены слайдов.Хотите слайды для автоматического продвижения?Установите таймер для вызова смены слайдов.

Единственное, что отличает это решение от полнофункционального слайдера, - это то, что обычно вы инкапсулируете все вместе и используете пользовательские события, а не функцию для изменения слайда.Я был бы рад расширить этот пример, чтобы показать разницу, если хотите.